0

floatで横並びにしたリストをセンタリングする方法

floatで横並びにしたリストをセンタリングする方法

複数の<li>タグをfloatで横並びに配置した際に、全体の<ul>をセンタリング表示したい時ってありますよね。例えば、ページネーションなどがいい例ですが、よくあるセンタリングの指定方法の横幅を指定して「margin: 0 auto;」をこの<ul>タグに指定しても真ん中には寄ってくれません…。ましてや、「text-align: center;」も同様です…。

こういった場合は、「position: relative;」を利用してセンタリング表示することが出来るんです。

● サンプルを見ながら確認していきます。

 

デモサンプル

 

▼HTML  シンプルなページネーションのようなものがあるとします。

▼CSS

全体を囲っている<div class=”pagenation”>の左上を基準点とし、リスト全体の<ul>要素を右に50%の位置に移動します。さらに、各リストの<li>要素を左に50%の位置に移動しています。

 float-centering解説

ちょっとややこしいですが、指定している内容は単純なことですね。 
ページネーションやリスト配置は、頻繁に利用されていると思いますのでご参考までに・・・。

 




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

mororeco > CSS > floatで横並びにしたリストをセンタリングする方法