极客小俊

把逻辑思维转变为代码的技术博主

你不用拼过聪明人，你只需要拼过那些懒人 你就一定会超越大部分人!

那现在我们废话不多说,就先来看一张文字在网页中的结构图:

从上到下四条线分别是顶线(绿色)、中线(蓝色)、基线(红色)、底线(紫色)

图中黄颜色的线位置表示: 行间距 其实是分为上一行文字的下半行距 和 下一行文字的上半行距, 这里要是听不懂 没关系 我们接下来会慢慢说半行距的意义!

小提示: 之后我们要讲到的vertical-align css属性中有top、middle、baseline、bottom，就是和这四条线相关!

什么是基线?

要了解基线 那么还要知道 在我们英文的26个字幕当中 有一个小写的x字母是在CSS中相当特殊的!   那么基线是什么呢？

解答: 基线就是小写x字母的下边缘(线) 就是我们常说的 基线   而不是那些有尾巴的英文字母, 例如:  s 、j、g、k、f、y

所以一定要注意: 基线（baseline）不是汉字文字的下底部，而是英文小写字母“x”的下底部!

内联元素默认是按照基线对齐的 而基线就是小写字母x的底部!  不懂的话举个例子 如下:

 北京市
 <span>深圳市</span>
 <strong>计算机</strong>
 <img src="images/1.gif">

效果图: 红色箭头指向位置从图中可以发现, 只要是内联元素基线都是对齐的!  也就是说内联元素中的文字都是放在基线上的!

例如下图一样:

line-height属性设置的行高也就是定义的两行文字基线之间的距离!  原因是因为中间夹杂了更多的行距 关于行距的概念我们接下来会说到!

如果把line-height设置为0px 那么这个基线就会重叠! 文字也重叠了!    

那么也由此可见 设置line-height会影响基线之间的距离!  基线变大了 每一行的文字也就隔开了!  

什么是顶线

顶线就是在中文汉字的顶部位置就是顶线的位置!

如下图:

什么是底线

底线就是在中文汉字的底部位置 就是底线的位置!

什么是中线？x-height又是什么?

故名意思: css中有一个概念叫x-height,意思也就是小写字母x的高度!

那么在css当中小写x字母不仅有确定了基线(baseline)的位置,还有描述了中线(等分线)(middle)的作用!

中线又是什么?

在css中，有些属性值的定义就和这个x-height有关, 最经典最有代表性的就是vertical-align的属性值middle  这里的middle就是中间的意思 指的其实就是基线 往上1/2的位置 也就是小写x字母的中间交叉点那个位置！也就是middle的位置!  

这里就是我们所说的中线：横过小写英文字母x的中间的线!

如下图: 蓝色线位置

案例:

 <style>
     #cont{
         width:800px;
         background-color:rgb(255,255,30);
     }
     #cont>span{
         display: inline-block;
         border: 1px solid red;
         line-height: 60px;
         font-size: 36px;
     }
     /*一行文本 有且只有 一个基线  多行文本每一行都有一个基线*/
     #img{
         vertical-align: middle;
     }
 </style>
 
 <div id="cont">
     <span>
         <img src="images/test.gif" id="img">
         北京市 iphone x
     </span>
 </div>
 

效果图如下:

但是大家从结果上肯定也能够看出来,  vertical-align: middle 并不是绝对的垂直居中于文字对齐!

middle也只是一种近似接近于居中的效果! 因为不同的字体在行元素中的中线的位置是不一样的 !  

例如:

 <style type="text/css" >
 
     #test{
         background: yellow;
         font-size: 38px;
         font-family: serif;
     }
 
     #test2{
         background: yellow;
         font-size: 38px;
         font-family: 庞门正道标题体;
     }
 
     span>img{
         vertical-align: middle;
     }
 
 </style>
 
 <span id="test"><img src="images/test.gif"> 北京市 iphone x</span>
 <br>
 <span id="test2"><img src="images/test.gif"> 北京市 iphone x</span>

效果图: 从下图效果中可以看出 x的交叉点的高矮是不一样的位置!

所以 在CSS中, 内联元素(行元素) 垂直居中(也就是给内联元素设置vertical-align:middle)是对文字垂直居中, 而与外部容器无关!  

关于vertical-align元素后面会单独提及到

大家的支持就是我坚持下去的动力!