displayプロパティ その2
要素の表示形式を指定。
ブロック、インライン、テーブル、ルビ、フレックスコンテナ等。
主な値
[テーブル]
・テーブル要素:表組。
table:
table要素のような表示
table-cell:
td要素のような表示
(例)
■html
<div class="container”>
<div class="box td01”>
<p>td01</p>
</div>
<div class="box td02”>
<p>td02</p>
</div>
</div>
■css
.container{
display: table;
width: 400px;
height: 200px;
}
.box{
display: table-cell;
text-align: center;
color: #fff;
}
.td01{
background: #808080;
vertical-align: middle;
}
.td02{
background: #C0C0C0;
vertical-align: middle;
}
HTML&CSS: CSS。