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

现在标签＆＃34;看起来＆＃34;完全垂直对齐输入，我想这是因为显示的默认垂直对齐：内联块是baseline，现在这里有一个有趣的点是我在输入中添加vertical-align：middle并转到浏览器并打开ispector并从输入中取消vertical align:middle（临时），标签移动而不是输入，这引出了我的问题。

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

＆＃34;嘿输入垂直对齐你的中间位置   兄弟姐妹＆＃34; 或
     我是在说输入兄弟姐妹（在这种情况下是标签）＆＃34;嘿伙计们！   在输入方面将你自己垂直对齐在中间＃34; ??

Answer 1

都不是。

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

这就是为什么确保兄弟姐妹孩子都具有相同vertical-align值的重要性，你希望他们能够始终保持一致。

@MDN

大多数值垂直对齐元素相对于其父元素：

EG：中间

将元素的中间部分与其父级的基线对齐。

W3C Reference

垂直对齐适用于应用于其他内联块元素的元素？

1 个答案: