vertical-alignのいくつかの注意点
9920 ワード
vertical-align
参考博文
1.vertical-align有効シーン
2.vertical-alignによる中央揃え
vertical-alignプロパティは、要素の垂直位置合わせを設定します.このプロパティは、行内の要素のベースラインを、その要素が行のベースラインに対して垂直に位置合わせすることを定義します.負の長さ値とパーセンテージ値を指定できます.これにより、要素が上昇するのではなく低下します.表のセルでは、セル・ボックス内のセルの内容の配置を設定します.
3.コード終了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
div {
margin: 50px 0;
}
.box {
width: 200px;
height: 200px;
background: red;
color: #fff;
}
.t1 {
background: blue;
vertical-align: middle;
}
.t2 {
background: green;
height: 100%;
display: inline-block;
vertical-align: middle;
}
.box2 {
background: black;
color: white;
line-height: 50px;
display: inline-block;
}
.dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: red;
vertical-align: 0.5px;
display: inline-block;
}
.box3 {
display: table-cell;
vertical-align: middle;
background: blue;
color: #fff;
height: 300px;
width: 300px;
}
</style>
</head>
<body>
<div class="box">
<span class="t1">12312312</span>
<span class="t2"></span>
</div>
<div class="box2"><span class="dot"></span>1231231231231</div>
<div class="box3">
<span> </span>
</div>
</body>
</html>