css-对vertical-align各个属性的简单理解
2018-06-07 本文已影响0人
前端喵
vertical-align.png
如图所示，将字母放在四线格里面，然后去对比text-align的每一个属性的位置，从图中可以清楚地看到，每个属性分别是以哪个位置为准对齐的，在middle属性时添加了白线作为中线，也可以看到middle和baseline的一点点差别。
vertical-align是以父元素为基础元素本身的对齐方式，因此我们在div中写入了一个单词作为基准。首先说一下vertical-align的baseline的特别之处，baseline是父元素字母x的底部，你可以理解为父元素里有一个字母x，baseline是元素中字母x的底部与父元素字母x的底部对齐，字母x可以换成任意一个在四线格中只占一格的小写字母如a,c,o等等。
vertical-align各个属性值及表现.png
整段代码如下，可以自己动手看一下效果。
<!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>
body {
font-family: -webkit-pictograph;
}
div {
border: 1px solid black;
position: relative;
box-sizing: border-box;
}
.divLine {
width: 100%;
position: absolute;
height: 1px;
border: none;
background-color: gray;
}
.spanLine {
width: 100%;
position: absolute;
height: 1px;
border: none;
background-color: red;
}
.divLine1 {
top: 67px;
}
.divLine2 {
top: 80px;
}
.divLine3 {
top: 93px;
}
.divLine4 {
top: 100px;
}
span {
background-color: rgba(0, 0, 0, 0.3);
position: relative;
display: inline-block;
box-sizing: border-box;
}
</style>
</head>
<body>
<div style="font-size:30px; line-height:100px; ">
Aojpf
<div class="divLine divLine1"></div>
<div class="divLine divLine2"></div>
<div class="divLine divLine3"></div>
<div class="divLine divLine4"></div>
<span style="vertical-align:top;line-height:50px">ja-top</span>
<span style="vertical-align:bottom;line-height:50px">ja-bottom</span>
<span style="vertical-align:text-top;">ja-text-top</span>
<span style="vertical-align:text-bottom">ja-text-bottom</span>
<span style="position: relative;vertical-align:middle">
<span style="position: absolute;top: 50px;width:100px;height:1px;background-color:#fff !important"></span>ja-middle
</span>
<span style="vertical-align:baseline">ja-baseline</span>
<span style="vertical-align:sub">ja-sub</span>
<span style="vertical-align:super">ja-super</span>
</div>
</body>
</html>
