Question

我正在尝试垂直对齐div和input：

<div id="a">
    Button
</div>
<input type="text" id="b" placeholder="text">

他们都有相同的风格：

#a, #b{
    box-sizing: border-box;
    vertical-align: baseline;
    padding: 0;
    margin: 0;
    outline: none;
    font-size: 10px;
    line-height: 10px;
    font-family: serif;
    border: none;
    height: 30px;
    width: 100px;
    background: green;
    display: inline-block;
    border: none;
}

但是，它们没有垂直对齐：

Sample

这怎么可能？

请注意：这是一个较大项目的缩写示例，我必须使用vertical-align: baseline。无法更改该值，我不想使用任何黑客，例如添加margin-top。我想理解为什么vertical-align以这种方式运行并尝试找到一个干净的解决方案。

Answer 1

由于您的height具有静态值，因此您可以使用line-height: 30px; CSS属性强制进行所需的对齐。

JSFiddle

繁琐的解释：

你的div baseline是10 px（参见line-height属性），而你的元素height是30 px。 input元素内的文字默认垂直居中，baseline，在您的情况下为30像素。所以基本上，浏览器试图通过它的基线对元素进行居中，这对于元素是不同的，因此导致第一个元素（具有较小的基线值）被推下来。

Answer 2

您需要添加 float：left 以使其垂直对齐。

div和输入之间的垂直对齐

2 个答案: