css 垂直居中对齐不起作用

Question

.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有什么问题？为什么子元素不在父元素中间？

Answer 1

使用 flex 更好将以下内容添加到您的 parent:

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

并且您可以删除以下样式：.checka、.radioa、.selecta

Answer 2

您还可以添加 line-height 使它们居中。只需确保 height 和 line-height 相等即可。有关效果的另一个动态示例，请参阅。

.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>

css 垂直居中对齐不起作用

css vertical align middle doesn't work

html

css

vertical-alignment