c++ list box 字体设置_关于字体对齐那些事

作者：timCope

前言

前端开发中我们经常会遇到文字垂直居中的场景，这是候我就会使用line-height，vertical-align等css属性去调整文字的位置，但是实际我对这块内容一直是比较模糊的，未免有一些一叶障目了，因此在这里对这块内容进行整理总结，希望之后再遇到此类情况时可以做到成竹在胸。

字体相关概念

在进入本文正题之前，我们需要了解一下字体的简单概念，和我们小时候在四线簿上写字是一样的，在浏览器中，字体的展示也是有四条线的，我们将其称为 top middle base bottom，而我们下面所介绍的css属性都是与这四条线相关的，在网上找了一张图，四条线大抵是这样的。

baseline

基线就是图中标红的那个线，所有字符都基于这条线进行定位。在各种内联相关模型中，凡是涉及到垂直方向的排版或者对齐的，都离不开基线。而基线的定位来源于字母中的x，x的下边缘就是基线的位置，而基线与中线的之间的距离也被称为x-height就是小写x的高度。1ex就是x-height的值。

line-box

除了平常我们经常能接触到的盒模型（block-box），line box是就相对来的陌生了，下面我用一张图来介绍line-box

每行内容由多个内联元素组成，每一行都叫做一个 line-box。而一行中包含了很多子元素，我们称之为inline-box，inline-box不会让内容成块显示，而是排成一行。inline-box一般有两种，内联标签或者是包含文本的匿名内联元素。每它的高度，由行内最大line-height决定。

铺垫了不少，我们现在就是进入正题吧。

content-area

content-area是指文字内容区域，它的大小和文字的大小，字体类型有关。

font-size

前端开发中我们会使用font-size来设置文字的大小，假设那么我们设置的字体是12px，就代表着top line（顶线）和bottom line（底线）的距离为12px。同时引入啦em这个单位，1em也就是这个font-size的值。

font-family

前端开发中我们会使用font-family来设置文字的字体，不同的字体所展示的content-area也会导致不同，就像下面的图片所示，当然这块显示背景的区域不算是完整意义上的content-area，只是因为在高度未设置的情况下，content-area的高度和line-height相同罢了。

line-height

Line-height是指文本行基线间的垂直距离，它决定line-box的高度，由于我们看不见line-height和content-area的高度，行高同时决定来文本之间的间距，line-height的默认值normal，就是为了设置一个合适的行间距。

我们上面已经了解了，line-heght在height未固定是和content-area相一致的，而当高度确定时line-heght 和 content-area 高度会有一定差异，而这个差异就叫做 leading，leading是可正可负的，意味着实际行高可能低于文字的内容高度。leading和我们下面要介绍的行距类似，都是被查拆两分，加到内容的两端，区别在于，半间距是加在font-size的两端，leading是加在content-area两端（这部分可能有点绕）用偷来的图表示如下

因此当line-height 和height相等时由于会有半行距，文字会自然垂直居中。

vertical-align

vertical-align也是我们在文字对齐中，经常使用的一个属性，与text-align类似，vertical-align代表这个文字在垂直方向的位置。vertical-align的默认值为baseline，代表着文字的是以baseline进行定位的，我们有时会利用vertical-align：middle来实现元素的居中也就是元素上、下边的中点与行盒子基线加上x-height的一半对齐。用下图可以更清晰的表达，不同值元素对应的位置。

而vertical-align，取值是百分数值时，是相对于此标签继承的line-height值决定的。

vertical-align的其他属性，这里就不赘述啦，感兴趣的可以去专业的w3c规范里寻找。

为什么有时候vertical-align会失效

vertical-align起作用是有前提条件的就是vertical-align只能应用于inline,inline-block,table-cell的元素。在css中，如果设置一些类似float,position: absolute之类的样式，会改变元素的display值从而导致vertical-align也就失去作用。

如何达到文本对齐的效果呢？

了解行盒子的基线和上、下边界在哪儿？

了解了行盒子的上下边界也就是我们就可以设置行内元素的line-height和行盒子的高度一致，就可以使得不用字体大小的文字进行居中。

了解行内元素的基线和上、下边界在哪儿？

针对这个问题我需要了解行内元素的基线如果一个inline-block元素，里面没有内联元素，或者overflow不是visible，则该元素的基线是其margin底边缘；否则其基线就是元素里面最后一行内联元素的基线。我们只需要将第一个元素的vertical-align设置为top这样两者就想上对齐啦，在包裹一个父元素使其居中即可

参考

1.CSS深入理解vertical-align和line-height的基友关系

2.深入理解 CSS：字体度量、line-height 和 vertical-align

写在最后

关于文字对齐的问题，就写到这里啦，作为css中算是最复杂的一块内容了，经过这一次总结，我对于文本的展示形式也有了一个比较深刻的印象，之后如果有遇到这类问题，也会做一个记录总结。这篇文章是我个人的总结和理解，内容中可能存在一些不合理不正确的地方，希望各位不吝指正。