1枚目の画像はページの左側に、3枚目の画像はページの右側に、2枚目の画像は1枚目と3枚目の画像のちょうど真ん中に配置したいのです。
2番目の画像が他の2つの画像の中央に正確に配置された3つの画像を揃えるにはどうしたらよいでしょうか?
<div>
<img src="@Url.Content("~/images/image1.bmp")" alt="" align="left" />
<div id="content" align="center">
<img src="@Url.Content("~/images/image2.bmp")" alt="" align="center" />
</div>
<img src="@Url.Content("~/images/image3.bmp")" alt="" align="right"/>
</div>
<style type="text/css">
#content {
width:50%;
margin-left: auto ;
margin-right:auto ;
}
最新のアプローチ:フレックスボックス。 -。 次のCSSをコンテナ要素(ここでは「div」)に追加するだけです。
div {
display: flex;
justify-content: space-between;
}
<。!-スニペットを開始:js hide:true console:true babel:false -->。
div {
display: flex;
justify-content: space-between;
}
<div>
<img src="http://placehold.it/100x100" alt="" />
<img src="http://placehold.it/100x100" alt="" />
<img src="http://placehold.it/100x100" alt="" />
</div>
<。!-終了スニペット-->。
古い方法(古代のブラウザの場合-flexboxの前)。 -。 コンテナ要素で「text-align:asjustice;」を使用します。
次に、コンテンツを100%幅に伸ばします。
マークアップ。 ---。
<div>
<img src="http://placehold.it/100x100" alt="" />
<img src="http://placehold.it/100x100" alt="" />
<img src="http://placehold.it/100x100" alt="" />
</div>
CSS。 ---。
div {
text-align: justify;
}
div img {
display: inline-block;
width: 100px;
height: 100px;
}
div:after {
content: '';
display: inline-block;
width: 100%;
}
<。!-スニペットを開始:js hide:true console:true babel:false -->。
div {
text-align: justify;
}
div img {
display: inline-block;
width: 100px;
height: 100px;
}
div:after {
content: '';
display: inline-block;
width: 100%;
}
<div>
<img src="http://placehold.it/100x100" alt="" />
<img src="http://placehold.it/100x100" alt="" />
<img src="http://placehold.it/100x100" alt="" />
</div>
<。!-終了スニペット-->。
オプション1:
divの中に画像を入れるのではなく、spanの中に1枚ずつ入れる。
1枚目と2枚目の画像を左寄せにする。
2枚目の画像に左パディングを施す。
右側の画像を右側に寄せる。
画像でフロートを使用すると副作用があるため、すべての画像の親である
overflow:hidden
を追加することを常に覚えておいてください。
オプション2(優先)です:
これは、テーブルの正確な幅を気にすることなく、2枚目の画像を常に中央に揃えるための最良の方法となります。
下のようなものです:
<table width="100%" border="0">
<tr>
<td><img src="@Url.Content("~/images/image1.bmp")" alt="" align="left" /></td>
<td><img src="@Url.Content("~/images/image2.bmp")" alt="" align="center" /></td>
<td><img src="@Url.Content("~/images/image3.bmp")" alt="" align="right"/></td>
</tr>
</table>
これがあなたの答えになるはずです
<div align="center">
<img src="@Url.Content("~/images/image3.bmp")" alt="" align="right" style="float:right"/>
<img src="@Url.Content("~/images/image1.bmp")" alt="" align="left" style="float:left" />
<div id="content" align="center">
<img src="@Url.Content("~/images/image2.bmp")" alt="" align="center" />
</div>
</div>
HTML:
<div class="container">
<span>
<img ... >
</span>
<span>
<img ... >
</span>
<span>
<img ... >
</span>
</div>
CSS:
.container{ width:50%; margin:0 auto; text-align:center}
.container span{ width:30%; margin:0 1%; }
私はこれをテストしていませんが、これがうまくいくことを願っています。
.containerスパンに「display:inline-block」を追加して、スパンを30%の幅に固定することができます。
最初のDIVは#content
と仮定しました:
<div id="content">
<img src="@Url.Content("~/images/image1.bmp")" alt="" />
<img src="@Url.Content("~/images/image2.bmp")" alt="" />
<img src="@Url.Content("~/images/image3.bmp")" alt="" />
</div>
そして、CSS :
#content{
width: 700px;
display: block;
height: auto;
}
#content > img{
float: left; width: 200px;
height: 200px;
margin: 5px 8px;
}