BLOG

2014年4月13日/ css, li, ul

[CSS]ulのliを親要素に対しセンター配置する方法

こんにちわ!WEB制作を始めて早7年になる宮本です。

今日はWEBサイトを作る上で、よく使うけど、あれ、どうやってやるんだっけ?となりそうなテクニックを記載します。

ulのliを親要素の幅のセンターに配置する

フッターメニューなどにulを使ってliを横並びにし、親要素のセンターに配置したいケースはよくあると思います。

たとえばHTMLが下記のようになっているメニューがあるとします。

 

このメニューを親要素のセンターに配置するには、cssを下記のようにすれば可能です。

※他にも方法はあります。

ulタグを親要素(#footer)の真ん中の位置(left:50%)に配置し、liタグを半分左に戻す(left:-50%) ことにより実現しております。

 

コーディングしていると、こういったちょっとした事が分からなかったり忘れたりして、意外と時間かかってしまうことありますよね。

それで調べて方法が分かってその時は解決できても、また次回同じことがあった時に忘れてしまっている。

一度つまずいたことはメモしていく癖をつけましょう。

私もそうしていきたいと思います。

 

 

Resent Posts

Category