vertical-align
1. vertical-align生效场景
- 元素本身的display设置为inline 或者 inline-block
2. 通过vertical-align实现居中
vertical-align 属性设置元素的垂直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。
- 通过表格属性,来控制元素的居中
- 通过设置一个空元素,然后让空元素height: 100%,让目标元素与该元素相对其
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>
- box1 通过添加空元素来实现居中
- box3通过给其父元素添加display: tabel-cell来将其变为表格,然后通过vertical-align: middle来实现其子元素居中
- box2 通过将dot的vertical-align设置为middle, bottom (bottom对其元素整个的底部), top, text-bottom (相对于文字的底部平行)