css - 垂直对齐适用于应用于元素或其他内联 block 元素？

Question

嘿伙计们，我只是在玩弄一些 CSS，我是 CSS 的新手，我制作了以下简单的演示::

HTML::

     <label for="test">Name</label>
     <input type="text" id="test">

CSS::

                  input {
                height: 70px;
                border-radius: 5px;
                display: inline-block;
                //vertical-align: middle;
            }

现在标签“看起来”与输入完全垂直对齐，我想那是因为 display:inline-block 的默认垂直对齐是 baseline ，现在这里有一个有趣的点是当我添加垂直-align:middle to input 然后转到浏览器并打开 isspector 并从 input(temporarly) 中取下 vertical align:middle ，标签移动而不是 input ，这让我想到了我的问题 。

当我添加 vertical-align: middle;输入，我是说:

"Hey Input vertically align urself in the middle with respect to your siblings" OR

am i saying to inputs siblings(in this case label) "hey guys ! vertically align urselfs in the middle with respect to input" ??

Answer 1

都没有。

vertical-align 是指元素与内联元素的parent 元素的基线对齐。

这就是为什么确保 sibling 都具有相同的 vertical-align 值很重要，因为您希望它们始终保持一致。

@MDN

Most of the values vertically align the element relative to its parent element:

EG: middle

Aligns the middle of the element with the baseline of its parent.

W3C Reference