gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 11:53:24 24 4
gpt4 key购买 nike

嘿伙计们,我只是在玩弄一些 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" ??

最佳答案

都没有。

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

关于css - 垂直对齐适用于应用于元素或其他内联 block 元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30457666/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com