WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

display:table-cellを使って横並びにする

display:tablecellは要素をtableのtd(セル)として表示させるためのスタイル
特徴は
・カラム落ちしない
・全ての高さは一番高い高さと同じになる
・vertical-align:middleで上下中央に配置できる
・要素を均等に配置できる(スマートフォン対応に向いている)

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
<style>
ul.tab {
  display: table;
  width: 600px;
  height: 500px;
  margin: 50px auto;
  border-collapse: collapse;/*重複するボーダーを合体させる*/
}
li {
  display: table-cell;
  width: 33.33%;
  border: 1px solid #B06715;
  vertical-align:middle;/*上下の中央揃え*/
  padding: 10px;
}
</style>
</head>

<body>
<ul class="tab">
<li>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキストテキスト</li>
</ul>
</body>
</html>

ulにdisplay:tableと記述すると

として扱われる ulの中のliにdisplay:table-cellと記述して
として扱われる