Question

我创建了一个小代码笔来测试如何在容器内均匀对齐span，div，输入和选择元素。经过大量的反复试验，它可以在Chrome，Firefox和Edge上运行。

但是现在的问题是选择框。显示实际选择的文本将移动到内部文本的底行。这在检查器中也是可见的。出乎意料的是，Edge正在显示预期的行为并将文本居中。但是Chrome和Firefox不会。我尝试设置行高没有成功。甚至display:flex都没有改变。

此问题有适当的解决方案吗？

Answer 1

我已经为您更新了代码，并使用填充和内容框。这将适用于所有浏览器。

查看此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;
}

Answer 2

我已经测试了您的代码，发现在输入中选择 font-family：heritage （继承），选择textarea是多余的。

从其父元素继承该属性。 Inherit关键字指定属性应从其父元素继承其值。

发件人：https://www.w3schools.com/cssref/pr_font_font-family.asp

您的输入，选择，div已在容器类中，默认情况下继承字体家族。

您可以按照以下步骤修改代码。

HTML。

 <div class="container">
   <input type="text" value="TestText">
   <span>TestText</span>
   <div>TestText</div>
   <select>
     <option>Test</option>
   </select>
 </div>

CSS。

input, select, span, div { 
line-height: 1.15em;
height: 1.15em;
box-sizing: content-box;
}

Answer 3

经过长期的尝试和错误，并结合了Stackoverflow的不同答案，我找到了一种适用于IE11，Edge，Chrome和FF的解决方案。所有元素在所有浏览器中的高度都相同。所有元素都使用父元素中的字体大小。也不需要normalize.css或任何东西。我已经禁用了select的下拉箭头，但是如果启用，它不会影响结果。选择框的文字缩进只是唯一的区别。在IE11和Edge中，文本从左侧开始以一个小的填充开头。在Firefox上，我能够解决该问题。

https://codepen.io/auskennfuchs/pen/xMqVgG

.formcontrol {
  font-size: inherit;
  padding: 0.5em 0;
  margin: 0;
  line-height: @form-height;
}

input, select, button {
  border: 0;  
  height: @form-height;
  box-sizing: content-box;
}

当然，使用flexbox会容易得多，但在某些情况下，flexbox无法提供帮助，例如2列响应式布局和表单元素。

选择元素文本的垂直居中

3 个答案: