CSS垂直对齐中间不起作用

时间:2018-08-26 19:17:21

标签: html css vertical-alignment

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

2 个答案:

答案 0 :(得分:1)

您还可以添加line-height使其居中。只要确保heightline-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>

答案 1 :(得分:0)

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

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

,您可以删除以下样式:.checka,.radioa,.selecta