.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
有什么问题?为什么子元素不在父元素中间?
答案 0 :(得分: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>
答案 1 :(得分:0)
最好使用flex,将以下内容添加到您的父母中:
.parent{
height:50px;
background:gold;
display: flex;
align-items: center;
}
,您可以删除以下样式:.checka,.radioa,.selecta