• このエントリーをはてなブックマークに追加

floatを使って横並びレイアウトを実現することが多いが、display:table;を使って実現するのも手。
これを使用することにメリットというのは、縦方向の揃えが可能になるということ。

縦の中央揃えさえ綺麗になれば、大きさが左右揃っていなくても美しく見えるケースなどには利用できる。
試しにやってみては?

display:flexを使った方法

<ul>を使用しなければいけないというわけではないですが、よく使うレイアウトです。ただ単に縦の中央に配置するだけですので、それぞれのケースに合わせて追記する必要があります。

HTML

<div class="sample">
<ul>
<li>要素</li>
<li>要素</li>
<li>要素</li>
</ul>
</div>

CSS

.sample ul{
display:flex;
align-items:center;
list-style:none;
margin:0;
padding:0;
}