資訊專欄INFORMATION COLUMN
摘要：在閱讀，更有味道哦，今晚來我房間聊聊劇本作者博客還是來點個吧，啊，各位吳彥祖和高圓圓寫在前面最令人困惑的屬性是什么因為它總是達不到我們想要的效果一個加一個標題，一個頭像加一個名字，要讓它們倆垂直居中一通亂試之后，是不是只能惱怒的用或者今
在GitHub閱讀，更有味道哦：vertical-align，今晚來我房間聊聊劇本寫在前面作者博客：blog
還是來GitHub點個Star吧，啊，各位吳彥祖和高圓圓？
CSS最令人困惑的屬性是什么？vertival-align
因為它總是達不到我們想要的效果
一個logo加一個標題，一個頭像加一個名字，要讓它們倆垂直居中
一通亂試之后，是不是只能惱怒的用float或者margin、padding
今天，我們就來好好調教一下vertival-align這個傲嬌女神
概念line box
由若干行內元素占據的一行，會有一個虛擬的框，該行所有行內元素都在這個框里面，W3C把這個框叫做line box
line box的高度由里面最高的行內元素撐起
如果里面行內元素的總寬度超過一行，則換行顯示
text box
假如line box里面有一個英文字母x，這個字母的所有屬性均繼承自父元素
你把字母x用span包裹起來，設置背景顏色，背景顏色覆蓋的高度就是text box的高度
當然，它是由font-size和line-height共同決定的
text box是有其實的，你看那字母x明晃晃的背景顏色
只不過名字是我杜撰的，跟line box對應
W3C叫它父元素的文字，我覺得不是很好理解
金線
vertival-align是垂直對齊屬性，那它是跟誰對齊呢？
肯定是跟line box相關的某條線對齊，我把它叫做金線
我們都知道，小寫字母x落在text box的基線上，小寫字母g落在text box的底線上
字母x的下邊緣就是vertival-align: baseline;所要對齊的金線
金線這個名字也是我取的，因為它是一個準繩
其實說白了vertival-align默認值對齊的就是text box的基線，所以它跟父元素的font-size和line-height都有關系
本文不討論它們之間的關系，假設父元素的font-size和line-height都是固定的
當然不同的屬性值，金線的標的也是不一樣的，后面會講到
金線雖然是一個準繩，它卻沒什么骨氣，有時候會去遷就比較高的行內元素
inline元素和inline-block元素
vertival-align只對這兩種元素（或者變種）有效
一招鮮咱們先來一個命中率極高的解決方案
回到最前面的問題：一個logo加一個標題，一個頭像加一個名字，要讓它們倆垂直居中
biu
你給span加vertical-align: middle;，可是達不到效果
你給img加vertical-align: middle;，還是達不到效果
不是說好的垂直居中嘛，無賴呀！
其實，你給它們倆都加上vertical-align: middle;試試，效果是不是出來了？
我們潛意識肯定認為vertical-align是相對另一個元素對齊，否則怎么會期望達到我們想要的效果呢？
因為vertical-align是相對金線對齊，每個元素都要分別設置才能統一實現垂直居中
那你說我寫在父元素上可不可以？
想走捷徑，可以
你在父元素上寫vertical-align: middle;，然后你還要在每一個行內元素上寫vertical-align: inherit;
因為vertical-align默認是不繼承的
驚不驚喜！
當然，如果父元素顯式的設置了高度，并且比里面任何行內元素都要高，那一招鮮也蔫了，后面有例子
屬性值x top x bottom x text-top x text-bottom x middle x baseline x baseline visible x
通過這張圖，我們來聊一聊不同屬性值所對應的金線是什么
top: 金線所在的位置是line box的上邊
bottom: 金線所在的位置是line box的下邊
text-top: 金線所在的位置是text box的上邊，也就是字母x背景顏色的上邊
text-bottom: 金線所在的位置是text box的下邊，也就是字母x背景顏色的下邊
middle: 金線所在的位置是字母x的中部，也就是叉相交的地方
baseline: 金線所在的位置是字母x的下邊
需要注意的是，最后一個矩形和前一個矩形都是vertical-align: baseline;，不同的是最后一個矩形overflow的屬性值是visible
而前面所有矩形都是overflow: hidden;
為什么呢？
因為如果行內元素里面有文字，而行內元素的垂直對齊又是默認值時，是以行內元素里面最底部的文字基線和text box的基線對齊
然而如果設置了overflow: hidden;，就會觸發BFC，文字就不會影響對齊點了
我是為了附上文字，方便比較，所以讓前面的矩形都觸發了BFC
一個例子我希望實現圖片垂直居中，怎么弄？
直接給圖片設置vertical-align: middle;肯定是不行的
因為圖片比較高，金線會去遷就圖片
結果就是圖片紋絲不動，字母x對齊圖片中間
x
我看到網上有一篇文章是這樣做的
加一個span標簽，變成inline-block元素，高度和父元素一樣高，寬度1px，如果沒有背景顏色，它幾乎可以忽略不計
然后給圖片和這個span同時設置vertical-align: middle;
哎，發現真的可行
他解釋說圖片需要一個居中對齊的標桿，所以生造一個span，就可以使圖片居中了
效果是達到了，然而解釋是錯誤的
圖片對齊span，那span對齊誰呢？
其實圖片和span都是對齊金線，因為span的高度和父元素的高度一致，金線為了遷就它，就跑到父元素中間去了。然后圖片再去對齊金線，于是圖片也居中了
標桿永遠是金線，只不過金線的位置是動態計算的，有時候要去遷就比較高的行內元素
x
其實還有一種辦法，給父元素設置行高等于高度
這時候text box的高度和父元素的高度是一樣的，金線不需要去遷就任何人，圖片只管對齊它就是了
總結x
首先，line box里有一個text box，同時還有一根金線
不同的垂直對齊屬性值，對標的金線是不同的，所以多個元素可能對標多根金線，這是沒問題的
金線雖然是準繩，但它的高度是動態計算的，有可能要去遷就很高的行內元素
如果行內元素里面有文字，且屬性值為baseline的時候，是以里面文字的基線去對齊金線
但如果觸發BFC，則上一條失效
張鑫旭講到過，middle只是近似垂直居中，有興趣的可以去了解一下
如果金線跟text box有關，你可以在line box里放一個沒有任何樣式的小寫字母x，給它一個背景色（好吧背景色也是樣式），方便查看金線大概在哪里
金線，當它是text box的一部分時，肯定跟父元素的font-size和line-height是有關的，這個以后咱么再聊
其實大多數情況，一招鮮都可以解決，就是給所有行內元素設置垂直居中
總之，找到金線，你就找到組織了
寫在后面我和你們一樣，每次見到一行有多個行內元素就犯怵
所以下定決心弄清楚vertical-align的原理，希望對大家有一點微小的啟發
以上都是我自己的理解，金線也是我自創的，可能不是很嚴謹
CSS是一門玄學，夠用就好
在GitHub閱讀，更有味道哦：vertical-align，今晚來我房間聊聊劇本作者博客：blog
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113002.html
摘要：提供房間最大人數游戲模式，默認為允許觀戰，默認不允許固定字段。服務端收到請求后，將完全按照進行匹配，即將攜帶相同的的玩家匹配到一起。提供創建房間的接口用于玩家創建房間，玩家主動創建的房間和系統自動創建的房間隔離。 什么是類Dota游戲的天梯匹配 玩過Dota或者LOL的人都知道 . 天梯匹配系統是一套將 玩家的實力 量化,并進行實時分配組隊游戲 , 結算的系統. 旨在將單局游戲的勝率控...
摘要：背景是在命令行中渲染系統的一個實現在上已經有看著蠻好玩因此嘗試著寫了一個五子棋游戲經過若干天的劃水終于初見成效了先來看個演示動畫太大這里放不下請移步觀看需要聲明的是這個客戶端我已經開源在了上地址是但是這是一個在線游戲的客戶端因為商業原因服務 背景 Ink 是 React 在命令行中渲染系統的一個實現, 在 GitHub 上已經有 1w+ Star. 看著蠻好玩, 因此嘗試著寫了一個五子...
閱讀 1482·2019-08-30 15:44
閱讀 1946·2019-08-30 14:07
閱讀 2871·2019-08-30 13:56
閱讀 2337·2019-08-29 17:06
閱讀 1324·2019-08-29 14:13
閱讀 2079·2019-08-29 11:28
閱讀 3224·2019-08-26 13:56
閱讀 1941·2019-08-26 12:11
