css - 选择元素的文本垂直居中

Question

我创建了一个小型代码笔来测试如何在容器内均匀对齐 span、div、input 和 select 元素。经过大量试验和错误后，它可以在 Chrome、Firefox 和 Edge 上运行。

https://codepen.io/anon/pen/QJQaVX

但现在的问题是选择框。显示实际选择的文本被移动到内部文本的底线。这在检查器中也可见。令人惊讶的是，Edge 显示了预期的行为并将文本居中。但是 Chrome 和 Firefox 不会。我试过设置行高但没有成功。甚至 display:flex 也没有改变任何东西。

这个问题有什么好的解决办法吗？

Answer 1

我已经为您更新了代码并使用了 padding & content 框。这将适用于所有浏览器。

看看这个 codepen

<div id="container1">
    <input id="textbox" type="text" value="Test" />
    <span>TestText</span>
    <div>TestText</div>
    <select id="dropdown">
        <option>Test</option>
    </select>
</div>


#container1 input[type="text"], 
#container1 select, 
#container1 span, 
#container1 div {
    padding: 1em;
    border: 1px solid #ccc;
    line-height: 16px;
    height: 16px;
    font-size: 14px;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    display: inline-block;
    margin: 10px 10px 0px 20px;
}