Mistj's Digital Garden

Appearance

CSS-vertical-align小结

我对CSS vertical-align的一些理解与认识（一） « 张鑫旭-鑫空间-鑫生活
vertical-align属性测试实验面板 >> 张鑫旭-鑫空间-鑫生活

  • vertical-align:baseline;

baseline ​

默认 baseline

  • vertical-align:baseline;
html
<span style="background: black;color: white;padding-left: 20px;">  
    <span style="display: inline-block;width: 4px;height: 4px;background: white;vertical-align:baseline;"></span>  
    <span style="display: inline-block">我是一段文字</span>  
</span>
<span style="background: black;color: white;padding-left: 20px;">  
    <span style="display: inline-block;width: 4px;height: 4px;background: white;vertical-align:baseline;"></span>  
    <span style="display: inline-block">我是一段文字</span>  
</span>
我是一段文字

bottom ​

html
<span style="background: black;color: white;padding-left: 20px;">  
    <span style="display: inline-block;width: 4px;height: 4px;background: white;vertical-align:bottom;"></span>  
    <span style="display: inline-block">我是一段文字</span>  
</span>
<span style="background: black;color: white;padding-left: 20px;">  
    <span style="display: inline-block;width: 4px;height: 4px;background: white;vertical-align:bottom;"></span>  
    <span style="display: inline-block">我是一段文字</span>  
</span>
我是一段文字

text-bottom ​

对比vertical-align:bottom和vertical-align:text-bottom，他们的表现似乎一样，实际上呢，这里的表现一致只是一个巧合而已，此话怎讲？要显示其差异很简单，添加一个line-height值，您就会看到不一样的地方了

是line-height的位置

html
<span style="background: black;color: white;padding-left: 20px;">  
    <span style="display: inline-block;width: 4px;height: 4px;background: white;vertical-align:text-bottom;"></span>  
    <span style="display: inline-block">我是一段文字</span>  
</span>
<span style="background: black;color: white;padding-left: 20px;">  
    <span style="display: inline-block;width: 4px;height: 4px;background: white;vertical-align:text-bottom;"></span>  
    <span style="display: inline-block">我是一段文字</span>  
</span>
我是一段文字

middle ​

vertical-align: middle; 居中对齐。如果相对块级元素有用，同时还要需要添加dispaly：table-cell。

我是一段文字