css垂直对齐中间不起作用[重复]答案

【问题标题】：css vertical align middle doesn't work [duplicate]css垂直对齐中间不起作用[重复]
【发布时间】：2018-08-27 03:53:26
【问题描述】：

.parent{
height:50px;
background:gold;
}

.checka, .radioa, .selecta{
display:inline-block;
vertical-align:middle;
}

<div class='parent'>
<input type='checkbox' class='checka'>
<input type='radio' class='radioa'>

<select class='selecta'>
<option>lorem</option>
<option>lorem</option>
</select>
</div>

这里的vertical align:middle 有什么问题？为什么子元素不在父元素的中间？

【问题讨论】：

因为你没有给他们一个高度？
@j08691 我们不需要高度，垂直对齐使用线框（没有人可以看到）而不是包含块（每个人都可以看到）......这总是会混淆大家

标签： html css vertical-alignment

【解决方案1】：

您还可以添加line-height 以使它们居中。只要确保height 和line-height 相等即可。请参阅CSS vertical-align, how can I remove the little spacing below the text? 了解另一个动态效果示例。

.parent{
height:50px;
line-height: 50px;
background:gold;
}

.checka, .radioa, .selecta{
  display:inline-block;
}

<div class='parent'>
  <input type='checkbox' class='checka'>
  <input type='radio' class='radioa'>

  <select class='selecta'>
    <option>lorem</option>
    <option>lorem</option>
  </select>
</div>

【讨论】：

我们仍然需要vertical-align:middle ...增加行高将增加行框并按预期保持中间对齐...实际上它们并不完全在中间跨度>

【解决方案2】：

最好使用flex 将以下内容添加到您的父母：

.parent{
height:50px;
background:gold;
display: flex;
align-items: center;
}

您可以删除 .checka、.radioa、.selecta 的样式

【讨论】：

这在 IE11 中也可以使用吗？