忍者ブログ
Flex,Java,Html など、調べた事のメモ帳です。 間違ってたらゴメンなさい。
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

リストを横並びにしてセンタリングというのはよく使う。ただよく使う(われる)わりには「これ!」というようなテクニックがないような気がする。inline-blockで並べた場合は項目の間に隙間ができ、floatで並べた場合はセンタリングがトリッキーすぎる。気分で色々使い分けてたけど最近はdisplay: inline-tableをよく使うようになって、これで良いかなーという感じ。

<nav class="paging">
  <ul>
    <li><a href="foo">Prev</a></li>
    <li><a href="bar">Next</a></li>
  </ul>
</nav>

というようなマークアップの一般的なページング・ナビゲーションだと、

.paging {
  text-align: center;
}

.paging ul {
  display: inline-table;
}

.paging li {
  display: table-cell;
}

という形で行う。display: tableだと幅が明示されてないとセンタリングできないのでinline-tableのが手軽で良い。.pagingのようなラッパー要素がないと実現できないのでマークアップに依存するというのが一番大きな欠点。

この記事にコメントする
name
title
color
mail
URL
comment
pass   Vodafone絵文字 i-mode絵文字 Ezweb絵文字
secret (チェックを入れると管理人だけに表示できます)
ブログランキング
にほんブログ村 IT技術ブログ IT技術メモへ
 
カレンダー
05 2017/06 07
S M T W T F S
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30
人気ブログランキング
ブログランキング ブログランキング
最新CM
最新TB
ブログ内検索
PR
ATOM  
ATOM 
RSS  
RSS 
Copyright ©   プログラムメモ   All Rights Reserved
Design by MMIT  Powered by NINJA TOOLS
忍者ブログ [PR]