リストの中央寄せ « 株式会社ゼノフィ

ul liタグで幅を決めずに横並びで中央に寄せる方法をご紹介いたします。 liを横並びにするときは、「float: left;」を指定することが多いと思います。幅が固定ならば中央寄せにすることは難しいことではありませんが、なんらかの事情で幅が決められない場合に、「float: left;」での横並びで中央寄せを実現しようとすると難しいものがあります。 「ul.center」の「text-align: center; 」でul自体を中央寄せにします。次に、「ul.center li」の「display: inline-block;」で横並びにします。「display: inline-block;」はブロック要素と同じように幅と高さを指定することができます。また、インライン要素と同じで同一の行内に表示されます。 ul.center { margin: 0; /* 余分なマージンを消去 */ p

[h-akasako]

ul liタグで幅を決めずに横並びで中央に寄せる方法をご紹介いたします。