Question

我已阅读关于vertical-align的{{3}} various。我也看到了articles，但是this SO question both说这是因为周围文本默认为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;，但文字仍有向下倾斜。有趣的是，answers引用了MDN，它指出vertical-align: middle;与父元素中小写字母的中间对齐。这解释了奇怪的倾斜，但即使使用全部小写字母，也会出现偏斜one of the answers。使用display: inline-block; still happens。

我会抛弃我对这种反直觉的看法，而是问：有vertical-align的方式来代替大写字母吗？或者，更好的是，整行的中间？我希望保留HTML的结构，同时允许例如行中doesn't work either - 不仅仅是文字。

简而言之：偏差是我不想要的，但我仍然希望内联元素与其行的中间垂直对齐，而不管HTML结构如何。

编辑：images and other tall things和with vertical-align（让观众尽可能广泛）

Answer 1

vertical-align旨在设置兄弟元素（"elements set next to each other on a line"）的对齐方式 - 而不是从父级到子级。

在这个例子中，我有几个span彼此相邻，并且它们正确对齐。当你开始嵌套它们而没有兄弟元素时，对齐并不知道要对齐什么（好吧，我不知道它与leas对齐的是什么，但没有立即直观）。如果给嵌套元素一个兄弟，它们会再次正确对齐。

＆＃13;

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

＆＃13;

<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>

＆＃13;

<强>更新

您似乎根本不想设置vertical-align属性。浏览器使用的方法本身就是您正在寻找的功能

vertical-align与大写字母的中间而不是小写字母？

1 个答案: