リスト要素を横並びさせてリスト全体を中央揃えさせる方法まとめ

 

 Web技術

バナーやナビゲーションで結構使用する機会の多い
「横並びかつ中央揃え」のレイアウト。

よく使用する方法2パターンと
CSS3のFlexboxを使用した方法を(今更ながら)まとめました。

下記のHTMLを使用していきます。

「position:relative;」を使う

floatで横並びにするならこちらを使用します。

CSS

DEMO

  • 1
  • 2
  • 3
  • 4

「display:inline-block;」を使う

私としてはこれが一番わかりやすく、使用頻度も高いです。

inline-blockでliを横並びにするとタグを改行した時に空白ができます。
タグを改行しなければよろしいですがhtmlが見づらいので下記のように

  • ulタグのフォントサイズを0に
  • liタグで元のフォントサイズを指定する

もしくは

  • ulタグに「letter-spacing: -.4em;」を指定する
  • liタグに「letter-spacing: normal;」を指定するして元に戻す

することで改行しても空白ができないようになります。

CSS

DEMO

  • 1
  • 2
  • 3
  • 4

CSS3 Flexboxを使う

Flexboxは、要素の横並びや縦並び、高さを揃える、
上下左右の中央寄せなどが簡単に実装でき
レスポンシブにも対応しやすいです。

ですがIEでバグが出る(もうIEはいい)、
プロパティが多くて覚えにくい(覚えなさい)
など個人的にはとっつきにくいです。。。

とりあえず中央揃えくらいは覚えておこうかと思います(笑)。

DEMO

  • 1
  • 2
  • 3
  • 4

▼参考にさせていただきました。ありがとうございました。

 この記事の投稿者

taka

taka

Webサイト作ってます。
最近のモットー「決して無理をしないスタイル」

twitter: @taka_sbs

  • このエントリーをはてなブックマークに追加
  • 0 follow us in feedly

メッセージ

入力エリアすべてが必須項目です。
メールアドレスが公開されることはありません。

*コメント

*名前

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

ページ最上部へ