垂直对齐大写字母而不是小写字母的中间？

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属性的。浏览器使用固有的功能，因为你正在寻找