这几天遇到了好多关于字体垂直居中的问题,整理一下,希望对大家也有帮助。
vertical-align:middle
vertical-align 用来指定行内元素(inline)和行内块级元素(inline-block)或表格单元格(table-cell)元素的垂直对齐方式。
inline和inline-block
对于行内元素和行内块级元素,vertical-align
对middle
的处理方式都是一样的。
baseline——基线
元素基线与父元素的基线对齐。
middle——垂直居中
元素中垂线与父元素的基线加上小写x一半的高度值对齐。
当我们对想要垂直居中的元素设置vertical-align:middle
时,往往得不到我们预想的垂直效果。
核心代码:
<style>
.va{vertical-align: middle;}
div{font-size: 36px;
margin: 20px auto;border: 1px dashed #000;text-align: center;}
.inline{display: inline;
font-size: 12px;
border: 1px dashed #000;}
</style>
<div>
<span class="va inline">inline垂直居中</span>
inline垂直居中
</div>
很明显,这个垂直居中的效果没有我们想象中那么好。
但是如果我们改变策略:
把设置vertical-align: middle;
的元素作为标准,周围的文字就会垂直对齐。
更加通俗的讲,就是设置vertical-align: middle;
的元素更大一点,周围的文字元素要更小一点,就能实现周围文字的垂直居中。
核心代码
<style>
.va{vertical-align: middle;}
div{font-size: 12px;//更改了大小
margin: 20px auto;border: 1px dashed #000;text-align: center;}
.inline{display: inline;
font-size: 36px;//更改了大小
border: 1px dashed #000;}
</style>
<div>
<span class="va inline">inline垂直居中</span>
inline垂直居中
</div>
这才是我们想要的垂直居中的效果。
table-cell
baseline——基线 (与sub, super, text-top, text-bottom, <length>, <percentage>
等属性具有同样的效果)
与同行单元格的基线对齐。
middle——垂直居中
单元格垂直居中
本文讨论的是文体垂直居中,该属性的情况就不深入讨论了。
line-height + height
当line-height等于height时,可以实现字体垂直居中。
具体实现:
目标元素(字体)的line-height大小等于父类元素的height大小,可以实现垂直居中。
核心代码:
<style>
* { margin: 0;padding: 0;}
div{width: 300px;
height: 100px;//父类元素高度
margin: 20px auto;border: 1px dashed #000;text-align: center;}
.lh{font-size:24px;
line-height:100px; //目标垂直字体的行高
}
</style>
<div>
<span class="lh">inline垂直居中</span>
</div>
行内块级元素垂直居中+vertical-align:top
这种方法比较麻烦,但是适用于更多的场合。
实现过程如下:
1. 更改字体所在的元素为display:inline-block
,position:relative;
2. 设置字体的line-height
与font-size
相等;
3. 设置字体所在元素,top:50%;
,vertical-align:top
,margin-top
为负的font-size
大小的一半。
核心代码
<style>
* { margin: 0;padding: 0;}
div{width: 300px;height: 100px;margin: 20px auto;border: 1px dashed #000;text-align: center;}
.middle{display: inline-block;position:relative;
font-size:24px;line-height:24px;
top:50%;margin-top:-12px;
vertical-align:top; }
</style>
<div>
<span class="middle">inline垂直居中</span>
</div>
实现的思路:
1. 将字体放置到一个行内块级元素中
2. 将行内块级元素垂直居中
细节说明:
display:inline-block
让span
元素变成一个行内块级元素,配合position:relative;top:50%;margin-top:-12px;
可以实现块级元素垂直居中。font-size
与line-height
相等是为了保证span
元素的高度不被行间距所影响,高度只由font-size
控制,方便了margin-top
的设置。vertical-align:top
是为了保证字体是顶格的,让文体看起来更像是垂直居中。
前两条估计大家都懂,我来详细说说最后一条vertical-align:top
。
vertical-align:top
把元素的顶端与行中最高元素的顶端对齐。
我们先来看看
vertical-align:baseline | middle | top 这三种的效果。
基线的效果:
中线的效果:
顶线的效果:
我们可以这样想象:
由于我们设置了position:relative;top:50%;margin-top:-12px;
,这相当于从上向下排列元素。
如果我们要保证字体也垂直居中,也必须字体在元素内部的从上到下排列(也就是所说的顶格),所以需要设置vertical-align:top
。