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

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

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

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

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

オンライン講座

Webの基礎マスター講座ページへのリンク


連載講座:WordPressで作る簡単Webサイトページへのリンク

提供しているサービス

WordPressサイト制作出張講座ページへのリンク

WordPress を利用した Webサイト制作の方法を、
あなたのオフィスにうかがいご説明いたします。
料金:¥49,500

サービス詳細ページ >>

申し込みフォーム >>


Webサイト1日公開サービスページへのリンク

一刻も早く Webサイトが必要な方のために、
一緒に作業し1日で公開までもっていきます。
料金:¥49,500

サービス詳細ページ >>

申し込みフォーム >>

特集記事

  • WordPress Image

    WordPress の基礎から応用まで
    Webサイト制作ツールとして圧倒的な人気を誇るWordPress。利用するにあたって必要な知識を体系的にまとめた記事です。
  • jQuery Mobile Image

    jQuery Mobile を基本から覚える
    スマホサイト制作に最適なフレームワークの利用方法を解説。DEMOページ・サンプルコードで動作を確認できます。

スポンサーリンク

ページの先頭へ