简单画一下vertical-align的对齐方式
注意点：
1、vertical-align设置给需要对齐的元素自身
2、对行内元素有效
3、根据父元素的行高（line-height）和文字大小（font-size）对齐
<body>
<div class="css-vertical">
<div class="css-vertical__wrapper">
<div class="css-vertical__text">
<div class="css-vertical__box css-vertical__box-0"></div>
<div class="css-vertical__box css-vertical__box-1"></div>
hello go
<div class="css-vertical__box css-vertical__box-3"></div>
<div class="css-vertical__cont">hello go</div>
<div class="css-vertical__box css-vertical__box-2"></div>
<div class="css-vertical__box css-vertical__box-5"></div>
<div class="css-vertical__cont">hello go</div>
<div class="css-vertical__box css-vertical__box-4"></div>
<div class="css-vertical__box css-vertical__box-7"></div>
<div class="css-vertical__cont">
<span class="css-vertical__text-top">上标</span>
hello go
<span class="css-vertical__text-bottom">下标</span>
</div>
<div class="css-vertical__box css-vertical__box-6"></div>
</div>
</div>
</div>
</body>
<style lang='scss'>
.css-vertical__wrapper {
width: 100%;
height: 90vh;
.css-vertical__text {
width: 100%;
background: skyblue;
font-size: 40px;
margin: auto;
line-height: 150px;
/*height: 200px;*/
.css-vertical__cont {
display: inline-block;
}
.css-vertical__text-top {
color:red;
vertical-align: super;
font-size: 16px;
}
.css-vertical__text-bottom {
color:red;
vertical-align: sub;
font-size: 16px;
}
.css-vertical__box {
display: inline-block;
width: 20px;
height: 20px;
}
.css-vertical__box-0 {//元素底部放置在父元素的基线(一行文字最短的文字的底部)上
background: #FFFFFF;
vertical-align: baseline;/*默认值*/
}
.css-vertical__box-1 {//元素底部与父元素最大行高底部对齐
background: red;
vertical-align: bottom;
}
.css-vertical__box-2 {//元素与文字中线（量了一下，可能是最短文字的中线）对齐
background: yellow;
vertical-align: middle;
}
.css-vertical__box-3 {//元素顶部与父元素最大行高顶部对齐
background: blue;
vertical-align: top;
}
.css-vertical__box-4 {//元素与文字底部对齐
background: #ff6606;
vertical-align: text-bottom;
}
.css-vertical__box-5 {//元素与文字顶部对齐
background: black;
vertical-align: text-top;
}
.css-vertical__box-6 {//元素底部与文字下标基线对齐
background: gray;
vertical-align: sub;
}
.css-vertical__box-7 {//元素底部与文字上标基线对齐
background: purple;
vertical-align: super;
}
}
}
</style>
