リスト内のイメージ要素を上下左右中央揃えにする
画像の左右中央揃えは簡単ですが、上下左右となると少し工夫が必要です。
リスト内のimg要素をCSSの設定で上下左右中央揃えにするコードです。
サンプルでは、画像を横に並べそれぞれ100x100のエリア中央に配置します。
ポイントは、「display:table」と「display:table-cell」を使っていることです。
まずは、img要素をpタグで囲みます。
|
1 2 3 4 5 |
<ul class=”al-center”> <li><p><img src=”images/image1.jpg” alt=”画像1” /></p></li> <li><p><img src=”images/image2.jpg” alt=”画像2” /></p></li> <li><p><img src=”images/image3.jpg” alt=”画像3” /></p></li> </ul> |
次にCSSで、liとその中のpに対して設定をします。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
ul.al-center li { float: left; width: 100px; height: 100px; display: table; } ul.al-center li p { display: table-cell; margin: 0; text-align: center; vertical-align: middle; } |
