リスト内のイメージ要素を上下左右中央揃えにする

画像の左右中央揃えは簡単ですが、上下左右となると少し工夫が必要です。
リスト内のimg要素をCSSの設定で上下左右中央揃えにするコードです。

サンプルでは、画像を横に並べそれぞれ100x100のエリア中央に配置します。
ポイントは、「display:table」と「display:table-cell」を使っていることです。

まずは、img要素をpタグで囲みます。

次にCSSで、liとその中のpに対して設定をします。

ページの先頭へ