極客小俊

把邏輯思維轉變?yōu)榇a的技術博主

你不用拼過聰明人，你只需要拼過那些懶人 你就一定會超越大部分人!

那現(xiàn)在我們廢話不多說,就先來看一張文字在網(wǎng)頁中的結構圖:

從上到下四條線分別是頂線(綠色)、中線(藍色)、基線(紅色)、底線(紫色)

圖中黃顏色的線位置表示: 行間距 其實是分為上一行文字的下半行距 和 下一行文字的上半行距, 這里要是聽不懂 沒關系 我們接下來會慢慢說半行距的意義!

小提示: 之后我們要講到的vertical-align css屬性中有top、middle、baseline、bottom，就是和這四條線相關!

什么是基線?

要了解基線 那么還要知道 在我們英文的26個字幕當中 有一個小寫的x字母是在CSS中相當特殊的! ? 那么基線是什么呢？

解答: 基線就是小寫x字母的下邊緣(線) 就是我們常說的 基線 ? 而不是那些有尾巴的英文字母, 例如: ?s 、j、g、k、f、y

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

內聯(lián)元素默認是按照基線對齊的 而基線就是小寫字母x的底部! ?不懂的話舉個例子 如下:

?北京市
?<span>深圳市</span>
?<strong>計算機</strong>
?<img src="images/1.gif">

效果圖: 紅色箭頭指向位置從圖中可以發(fā)現(xiàn), 只要是內聯(lián)元素基線都是對齊的! ?也就是說內聯(lián)元素中的文字都是放在基線上的!

例如下圖一樣:

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中, 內聯(lián)元素(行元素) 垂直居中(也就是給內聯(lián)元素設置vertical-align:middle)是對文字垂直居中, 而與外部容器無關! ?

關于vertical-align元素后面會單獨提及到

大家的支持就是我堅持下去的動力!