-
ID:Ui6fcC さんの質問

htmlとCSSを使います。

=====================

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
</head>
<body>
<style type="text/css">
<!--
.tensen10{
padding:5px;
border-color:#C1C1C1;
border-width:2px;
border-style:dashed;
width:700px;
background-color:#FFFFFF;
}
.tensen11{
margin: 0 auto;
padding:7px;
border-color:#FFC8C9;
border-width:1px;
border-style:dashed;
width:auto;
}
-->
</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 さんの回答

<!-- flexやつ
<style type="text/css">
.flex_wrap {
}
.flex {
display:flex;
align-items: center;
justify-content: center;
}
.flex_box:first-child {
border-right: 1px dashed #000;
margin-right: 20px;
padding-right: 20px;
}
</style>
-->
<!-- flex無しやつ -->
<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って初心者相手と分かると、ハイエナのように上級者様(笑)が湧いてきて叩き出すなんて、最高の場所ですねwww

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,402 views)

関連するトピックス

ページ上部に戻る