display:tableを使って均等な幅で要素を横並びにする方法とその他便利な使い方 | ウェブクラフト目次 1. display:tableとは 2. 要素を均等な幅で横並びにする方法 3. 高さが可変な要素の高さを合わせて横並びにする方法 4. 横並びにした要素の中のコンテンツを高さ中央揃えにする方法 5. tableのように、横並びにした要素を同じ幅で縦に並べる方法 6. 可変サイズの要素を外側の要素の中央に配置する方法 7. 画面サイズが小さくなった時に要素の横並びを解除する方法 8. まとめ display:tableとは 要素に対して指定することでtableのような表示にするCSSです。 display:table-cellやdisplay:table-row等と組み合わせて使用します。 要素を均等な幅で横並びにする方法 デモ HTML <ul class="demo1"> <li>January</li> <li>February</li> <li>March</li> <li
