-

ID:Ui6fcC さんの質問

htmlとCSSを使います。
=====================
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
</head>
<body>
<style type="text/css">

</style>
<img src="仮にAとします。" width="400">
<img src="仮にBとします。" width="200">
</body>
</html>
=========================
上記はdivのブロック要素の中に、画像が2枚入っている状態です。
画像のサイズが違うので水平線の中心線に整列させたいです。
そして画像と画像の合間と、左右の端の余白を綺麗に整列させたいです。
そして画像と画像の合間の中間にdashedの1px（カラーは自由）を、
入れたいです。
クラス付けしつつ、spanとかdivとかfloatなどを試しましたが、
どうしても上手くいきません。
どなた様か、ご指導、ご教授を頂けますと幸いです。
よろしくお願いします。

みんなの回答 6 件

ID:gkNETJ さんの回答

縦のセンタリングのやり方、点線のところは言っている意味がわかりません。
body{
display:table-cell;
}
img{
margin:auto 50px;
vertical-align:middle;
}

ID:fk4qwU さんの回答

こんなかんじ？
codepen.io/noidea-xyz/pen/XjRYzG

ID:w/sLIS さんの回答

<style type="text/css">
.clear {
zoom:1;
}
.clear:after{
content:".";
display: block;
height:0px;
clear:both;
visibility:hidden;
}
.flex_wrap {
text-align: center;
}
.flex {
display: inline-block;
}
.flex_box {
float: left;
display: inline-block;
}
.flex_box:first-child {
border-right: 1px dashed #000;
margin-right: 20px;
padding-right: 20px;
}
</style>
<div class="flex_wrap">
<div class="flex clear">
<div class="flex_box"><img src="仮にAとします。" width="400"></div>
<div class="flex_box"><img src="仮にBとします。" width="200"></div>
</div>
</div>
----------
トピ主のソース意味わからんからシンプルにしてます。flexあり、なし好きな方で。自称プロの方、指摘待ってます。

ID:w/sLIS

W3Qって初心者相手と分かると、ハイエナのように上級者様(笑)が湧いてきて叩き出すなんて、最高の場所ですねｗｗｗ

ID:ZCVoYj さんの回答

このトピ主のレベルではflexとかinline-blockとか分かるわけない（floatすら怪しそう）と思うのでtableタグでも使ってください．
<table>
<tr>
<td>IMG A</td>
<td>IMG B</td>
</tr>
</table>

ID:bweVT1 さんの回答

text/cssで時点で萎えた

ID:w/sLIS

↑何言ってんの？

ID:ML30oJ さんの回答

「うまくいきません」で説明放棄する人に救いはない。
2つの画像が整列した1枚の画像をつくることをおすすめする。

最終更新日:2016-09-28 (1,667 views)

関連するトピックス

ページ上部に戻る