イメージやテキストを天地（上下）のセンターに配置

センター合わせ CSS HTML
height指定のあるdivブロック等で、イメージやテキストを天地（上下）のセンターに合わせたいと思ったことありませんか。テーブルを使うと割と簡単にできますが、レイアウトのためにテーブルを使うのも考えものですよね。
というわけで、cssを使って調整してみました。


まずは実際のレイアウトイメージ
capture.png

【必要なCSS部分】

.thumb ul {
overflow: hidden;
}
.thumb ul li {
float: left;
list-style: none;
}
.thumb ul li p {
display: table-cell;
text-align: center;
vertical-align: middle;
width: 横サイズ;
height: 縦サイズ;
/layout-grid-line: 縦サイズ;
}
.thumb ul li img {
vertical-align: top;
}

display: table-cellを指定するとvertical-alignが有効になるようなので、それを利用して天地（上下）の配置をセンター合わせにします。
ie7はtable-cellが使えないので、layout-grid-lineを用いて補完しています。
（ie6は未確認です…）

【上記イメージのソース】

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>画像をセンター合わせに</title>
<style type="text/css">
.thumb * {
padding: 0;
margin: 0;
}

.thumb ul {
width: 380px;
overflow: hidden;
margin-bottom: 20px;
}

.thumb ul li {
float: left;
list-style: none;
margin: 0 5px 5px 0;
}

.thumb ul li p {
display: table-cell;
text-align: center;
vertical-align: middle;
width: 120px;
height: 120px;
background: lightslategray;
/layout-grid-line: 120px;
}

.thumb ul li img {
vertical-align: top;
}

.thumb.text {
color: lightsteelblue;
font: 1.2em "Times New Roman", Times, serif;
}
</style>
</head>

<body>
<div class="thumb">
<ul>
<li>
<p><img src="img/image1.png" alt="image1"></p>
</li>
<li>
<p><img src="img/image2.png" alt="image2"></p>
</li>
<li>
<p><img src="img/image3.png" alt="image3"></p>
</li>
<li>
<p><img src="img/image4.png" alt="image4"></p>
</li>
<li>
<p><img src="img/image5.png" alt="image5"></p>
</li>
<li>
<p><img src="img/image6.png" alt="image6"></p>
</li>
</ul>
</div>

<div class="thumb text">
<ul>
<li>
<p>text1</p>
</li>
<li>
<p>text2</p>
</li>
<li>
<p>text3</p>
</li>
<li>
<p>text4</p>
</li>
<li>
<p>text5</p>
</li>
<li>
<p>text6</p>
</li>
</ul>
</div>
</body>
</html>

上記のソースはfloatを使ってliを並べていますが、liに直接display: table-cellを設定しても有功にならないようで、中身をpやdivで囲ってそこに設定しています。

この記事へのコメント

コメントを書く
この記事へのトラックバック