垂直對齊大寫字母而不是小寫字母的中間？

Question

我已閱讀variousarticles約vertical-align。我也看過this SO question，但bothanswers說這是因爲周圍文本默認爲vertical-align: baseline;。然而，這是不低於的情況：

* 
 
{ 
 
    margin: 0; 
 
    padding: 0; 
 
    vertical-align: middle; 
 
    /* font-size: 1em; and line-height: 1em; do not change anything */ 
 
}

<span>0<span>0<span>0<span>0<span>0<span>0<span>0<span>0<span>0<span>0</span></span></span></span></span></span></span></span></span></span>

一切都被設置爲vertical-align: middle;，但仍然有文字的向下偏斜。有趣的是，one of the answers引用了MDN，其中指出vertical-align: middle;與父元素中的小寫字母的中間對齊。這解釋了奇怪的傾斜，但即使所有小寫字母，傾斜still happens。使用display: inline-block;doesn't work either。

我會拋開我的看法，反對這是多麼直觀，而是問：有沒有一種方法來vertical-align與中間的大寫字母而不是？或者，更好的是，中間的整行？我期望保留HTML的結構，同時還允許images and other tall things的行 - 不只是文字。

簡而言之：偏斜是我想要的不是，但我仍然希望內聯元素垂直對齊到他們行的中間，而不管HTML結構如何。

編輯：with vertical-align和without vertical-align（使觀看者儘可能寬）

Answer 1

vertical-align旨在設定兄弟元素（"elements set next to each other on a line"）的對準 - 不從父到子。

在這個例子中，我有幾個span彼此相鄰，他們正確對齊。當你在沒有兄弟元素的情況下嵌套它們時，對齊方式不知道該對齊到什麼位置（好吧，我不知道它在leas上對齊的是什麼，但沒有直接的意思）。如果你給嵌套元素一個兄弟，他們再次正確對齊。

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    vertical-align: middle; 
 
    border-top: 1px solid #ccc; 
 
}

<span>0</span> 
 
<span>0</span> 
 
<span>P</span> 
 
<span>p</span> 
 
<span>R</span> 
 
<span>r</span> 
 
<span>q</span> 
 
<span>Q</span> 
 
<span>0 
 
    1<span> 
 
    2<span> 
 
     3<span> 
 
     4<span> 
 
      5 
 
      <span>5.1</span> 
 
      <span>5.2</span> 
 
      <span>5.3</span> 
 
      <span>5.4</span> 
 
     </span> 
 
     </span> 
 
    </span> 
 
    </span> 
 
</span>

更新

看來你正在尋找根本就沒有設置vertical-align屬性的。瀏覽器使用固有的功能，因爲你正在尋找