- デフォルトのテーブルセルのコンテンツは、幅と高さによって決定されます
<style type="text/css" rel="stylesheet">
.content {
color: white;
}
.cell {
background-color: blue;
display: table-cell;
}
</style>
<div class="content">
<div class="cell">
test
</div>
</div>
- 固定幅と高さを提供することができます。
.cell {
background-color: blue;
display: table-cell;
width: 100px;
height: 100px;
}
- 直接設定表が明示的な声明ではありません、プラステーブルのデフォルトの幅と高さはコンテンツによって決定され、全てのパーセンテージは、使用するので、ワイド高比率が有効ではありません、テーブルを明示的に宣言し、幅と高さを定義する必要があります(行のデフォルトのフルテーブル)
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>cell</title>
</head>
<body>
<style type="text/css" rel="stylesheet">
.content {
color: white;
}
.table {
display: table;
width: 100%;
height: 200px;
}
.cell {
background-color: blue;
display: table-cell;
width: 100%;
height: 100%;
}
</style>
<div class="content">
<div class="table">
<div class="cell">
test
</div>
</div>
</div>
</body>
</html>
- セルの内容が水平方向中心
.cell {
background-color: blue;
display: table-cell;
width: 100%;
height: 100%;
text-align: center;
}
- 縦方向の中央にセルの内容:
.cell {
background-color: blue;
display: table-cell;
width: 100%;
height: 100%;
text-align: center;
vertical-align: middle;
}
注意:設定して行の高さ:100%;無効上下中央にテキストを作ることができない、行の高さを設定します:200pxの、垂直方向にもセンタリングすることができます