第三回:vertical-align与line-height

——断背好基友

vertical-align百分比是相对于line-height值计算的

{
  line-height: 30px;
  vertical-align: -10%;
}
{
  line-height: 30px;
  vertical-align: -3px;    /* 30px * -10% */  
}

通过现象看本质

随意一个标签,里面有个妹纸~

vertical-align与line-height实际上已经在一起搞基了~

对于内联元素,vertical-align与line-height虽然看不见,但实际上「到处都是」!

通过现象看本质

vertical-align与line-height实际上已经在一起搞基了~

 

vertical-align: baseline; line-height: 1.5; font-size: 24px;

看清本质,对症下药

vertical-align: baseline; line-height: 1.5; font-size: 24px;

 

对vertical-align或者line-height下药即可!

看清本质,对症下药

vertical-align: baseline; line-height: 1.5; font-size: 24px;

 

1. 消灭vertical-align

看清本质,对症下药

vertical-align: baseline; line-height: 1.5; font-size: 24px;

display: block; margin: auto;

看清本质,对症下药

vertical-align: baseline; line-height: 1.5; font-size: 24px;

 

2. 改变vertical-align

看清本质,对症下药

vertical-align: baseline; line-height: 1.5; font-size: 24px;

 

3. 改变line-height

基本现象衍生:(近似)垂直居中

vertical-align: baseline; line-height: 36px;

 

行高250像素

兼容性

IE7+

<p><img src="mm1.jpg"></p>
<p><img src="mm1.jpg"><!-- 这里要折行或空格 -->
</p>

通过简单现象看复杂现象

text-align:justify任意数目列表两端对齐效果

.justify-fix { display: inline-block; width: 250px; }
<p style="text-align: justify;">
    <img src="img/mm1.jpg" width="250">
    <img src="img/mm1.jpg" width="250">
    <img src="img/mm1.jpg" width="250">
    <img src="img/mm1.jpg" width="250">
    <i class="justify-fix"></i>
    <i class="justify-fix"></i>
    <i class="justify-fix"></i>
</p>

通过简单现象看复杂现象

为什么呢?

不同的现象,相同的始作俑者

vertical-align & line-height

这是什么鬼?

规范和文档

CSS2的可视化格式模型文档:

The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.
'inline-block'基线是正常流中最后一个line box的基线, 除非,这个line box里面既没有line boxes或者本身'overflow'属性的计算值而不是'visible', 这种情况下基线是margin底边缘。

什么意思呢?

.dib-baseline {
  display: inline-block; width: 150px; height: 150px;
  border: 1px solid #cad5eb; background-color: #f0f3f9;
}
<span class="dib-baseline"></span>
<span class="dib-baseline">x-baseline</span>

x-baseline

行高变0

xx

已知:2个相似inline-block按钮,一个行高0,一个行高正常, 默认的基线对齐。

提问:两个按钮UI表现是?

对齐 or 不对齐?

下回预告:vertical-align线类属性值深入理解

——深入理解vertical-align底线、顶线、中线的行为表现