2013-12-18 35 views
2

當從視覺角度垂直對齊內聯元素與垂直對齊:中間時,生成的對齊看起來略微偏離。這種效應來源於以下差異:內聯vertical-align:middle有什麼用例?

  • 在大多數人的看法豎直中間點文字自然似乎是一個大寫字母或者中間(又名帽高度)或一箇中間'h'或'f'(又名x-height + ascender)的小寫字母'h'或'f'
  • html/css標準將垂直中點定義爲小寫小寫字母的中間部分-字母「x '(又名x高度)

我懷疑t因爲某種有效的原因,html/css標準被定義爲這種方式。 那麼這個決定背後的思考過程是什麼?它是如何轉化爲這種垂直對齊行爲的具體用例?

+1

這在SO上並不真正有效。這個問題似乎是「這個解決方案存在問題嗎?」的形式,而不是一個實際的編程(或HTML/CSS編碼)問題。 –

回答

3

這可以用下面的圖像

enter image description here

分配空間的字體來概括通常包括用於所有推導空間。這包括強調。考慮下行者和資本/上升者,中點垂直落在小寫字母x(x高度)的中心點,粗略地(下行+上行/ 2) - 或者'y'和'h'的提示。

這與大寫字母高度+基線/ 2的平均線不同。正是這種差異說明了視覺差異 - 但是,請參考圖像:如果中線被視爲垂直中線,則結果將是一種字體,其底部具有額外的空白空間,由於(大致)25%的移位向上的y軸。在對齊方面,由於這個多餘的空間會形成底層字體的一部分,所以無法通過改變線條高度來控制錯位。

+0

您應該繪製一些手繪線條和箭頭標記x高度。 – BoltClock

+0

@ BoltClock'saUornorn - 添加修改圖像 – SW4

+0

這不是寫意!你需要更多[徒手](http://meta.stackexchange.com/questions/19478/the-many-memes-of-meta/19775#19775)! – BoltClock