.inputSet {
display: inline-block;
}
input {
display: block;
}
<div>
<span>δ:</span>
<div class="inputSet">
<input type="number">
<input type="range">
</div>
</div>
如您所见,此δ
位于底部,看上去很丑。相反,δ
应该垂直居中。 (向上移动)。
我已经阅读了本指南:https://css-tricks.com/centering-css-complete-guide/,但是找不到解决方案。 δ
显然是一个inline-*
元素,但是所有使该元素居中的方法都需要知道封闭div的高度:
span {padding-top: 30px; padding-bottom: 30px;}
,因为我不知道封闭的div
的渲染高度。span {height: 100px; line-height: 100px; white-space: nowrap;}
。有什么办法吗?
答案 0 :(得分:1)
您可以将vertical-align: middle
用于.inputSet
.inputSet {
display: inline-block;
vertical-align: middle
}
input {
display: block;
}
<div>
<span>δ:</span>
<div class="inputSet">
<input type="number">
<input type="range">
</div>
</div>
答案 1 :(得分:1)
因此,在垂直对齐任何内容时,我都是Flexbox的忠实拥护者,我增加了一些边距,并对HTML进行了一些重新组织,以使其正常工作,并使它看起来更好一点。我还添加了一个.Container类,以便您可以进一步了解它的工作原理,请查看更多信息:Flexbox
.Container {
display: flex;
margin: 24px 0;
flex-flow: column;
justify-content: center;
align-items: center;
}
.icon {
margin-right: 6px;
}
.inputSet {
margin: 12px 0;
display: flex;
flex-flow: row;
align-items: center;
}
<div class="Container">
<input type="number">
<div class="inputSet">
<span class="icon">δ:</span>
<input type="range">
</div>
</div>