关于line-height
如果一个标签没有定义height属性(包括百分比高度),那么其最终表现的高度一定是由
line-height
起作用。line box
的高度取行内元素的最高高度。无论
line box
所占据的高度是多少(无论比文字大还是比文字小),其占据的空间都是与文字内容公用水平中垂线的。(如上图)高度不固定的 div 实现文字垂直居中,使用padding。
关于vertilcal-align
vertical-align
用于垂直对齐 inline
元素,也就是display值为 inline
和 inline-block
的元素。
值 | 描述 |
---|---|
baseline | 默认。元素的基线与父元素的基线对齐。 |
sub | 降低元素的基线到父元素合适的下标位置。 |
super | 升高元素的基线到父元素合适的上标位置。 |
top | 把对齐的子元素的顶端与line box顶端对齐。 |
text-top | 把元素的顶端与父元素内容区域的顶端对齐。 |
middle | 元素的中垂点与 父元素的基线加1/2父元素中字母x的高度 对齐。 |
bottom | 把对齐的子元素的底端与line box底端对齐。 |
text-bottom | 把元素的底端与父元素内容区域的底端对齐。 |
length | |
% | 使用 line-height 属性的百分比值来排列此元素。允许使用负值。 |
inherit | 规定应该从父元素继承 vertical-align 属性的值。 |
line box
inline
元素一个挨着一个的摆放在行内,当行内元素太多的情况下,一个新行会被创建出来,这些行也叫做line box
,它将行内的所有内容都包裹了起来。- 垂直方向上的对齐都是发生在
line box
里面,它有 baseline,有文字盒(图中绿线之间部分),有上下边界(红线)。 inline
元素也有baseline和上下边界(绿线,即 text-top 、text-bottom),inline元素是需要对齐的对象。
关于基线
inline-block
元素的baseline的位置
- 在有处于正常流内容的情况下,
inline-block
元素的 baseline 就是最后一个作为内容存在的元素的baseline,如下图一。 - 在
overflow
属性不为 visible 的情况下,baseline是inline-block
元素的margin
下边界,如下图二。 在没有内容但是内容区有高度的情况下,baseline是
inline-block
元素的margin
下边界,如下图三。
图像与文字垂直对齐
<!-- left mark-up -->
<span class="icon middle"></span>
Centered?
<!-- right mark-up -->
<span class="icon middle"></span>
<span class="middle">Centered!</span>
<style type="text/css">
.icon { display: inline-block;}
.middle { vertical-align: middle; }
</style>
- 左图中的文字对齐于
line box
的baseline。而vertical-align
对齐的点是baseline加上半个x的距离(half of the x-height)。因此文字的最高点超过了图像的高度。 右图中,文字与图像都对齐于一个中点,文字的baseline稍微下移,位于line-box的baseline的下方。达到了图像与文字对齐的效果。
PS:在我自己实际操作的过程中,在一个块级元素内实现图片与文字垂直对齐效果,设置图片的CSS属性
vertical-align
为 middle,这时图片所在行的基线会上升,文字上移,实现图片与文字对齐,(若设置图片的CSS属性vertical-align
为 text-bottom,图片所在行的基线会相应上升,实现视觉上的文字上移,其它属性值同理可以推断。)如果想让文字与图像实现在块级元素中垂直居中,设置块级元素的line-height
即可。
inline元素下方出现空隙的解决
如上图所示,如果尝试将 li 元素在垂直方向上进行对齐的话,元素下方会出现空隙。代码如下:
<ul>
<li class="box"></li>
<li class="box"></li>
<li class="box"></li>
</ul>
<style type="text/css">
.box { display: inline-block;}
</style>
- 原因:inline元素是对齐 baseline 的,baseline 的下方会给字母的一部分留出空间,因此inline元素下方会产生一个空隙。
- 解决方案:
- 改变line-box的baseline的位置,如将 inline元素 的CSS属性设置为
vertical-align:middle
。 - 设置inline元素的 CSS属性
display:block
。
- 改变line-box的baseline的位置,如将 inline元素 的CSS属性设置为