横に並べたliタグを中央揃えにする

汗っかきなせいか、最近は1日に2回下着を着替えているjyunzyです:orooro::ase1:

先日はテキスト形式のグローバルナビを作ろうと思ったのですが、liタグを横に並べて
中央揃えをする時に見事にハマってしまいました。
:kaomoji2:

私の認識では、横に並べる=floatプロパティ、というイメージだったのですが
リストをfloat:leftで並べると左詰めになってしまい、中央揃えになりません。
(当たり前ですが・・・)
text-align:center;やmargin:0 auto;を使っても中央になりません。

ネットで調べてみたら一応、leftプロパティやoverflowプロパティ、positionプロパティ
使えば中央揃えにできるのですが、どうも煩わらしい感じがしました。

そんな事をツイートしていたら、「他の方法でもできるでしょ」とご指摘がありました。:kaomoji4:
ホントかな~?と思い検索してみたら、以下のようなスタイルシートを書けばいい事がわかりました。

li { display:inline; }

実際に上のようにliタグをブロックレベル要素からインライン要素に変換したら、横一列に並びました。
pタグのようにtext-alignプロパティを使えば、中央揃えにもできます。

別にfloatプロパティを使わなくても、横に並べる手段ってあるんですね・・・。しかも簡単だし。
今の自分のやり方が本当に正しいのか?という事を日頃から考えて仕事をしたいですね。

トラックバックURL

コメントを残す

メールアドレスが公開されることはありません。