我在 div 内垂直对齐 3 个跨度时遇到问题。这很容易实现，但是当我使用浮动时垂直对齐不起作用。我希望浅蓝色条垂直居中。代码：
.container {
}
.text-1 {
float: left;
padding-right: 10px;
}
.bar {
background-color: lightblue;
border-radius: 5px;
float: left;
height: 5px;
width: 150px;
}
.text-2 {
padding-left: 10px;
}
<div class="container">
<span class="text-1">Text 1</span>
<span class="bar"> </span>
<span class="text-2">Text 2</span>
</div>
非常感谢您的帮助。
JSFiddle https://jsfiddle.net/5cm4mn1b/
您可以使用display: inline-block;随着vertical-align: middle;在你的<span>元素而不是浮动。这样它们也可以彼此相邻放置，您可以应用垂直对齐：
.container span {
display: inline-block;
vertical-align: middle;
}
.text-1 {
padding-right: 10px;
}
.bar {
background-color: lightblue;
border-radius: 5px;
height: 5px;
width: 150px;
}
.text-2 {
padding-left: 10px;
}
<div class="container">
<span class="text-1">Text 1</span>
<span class="bar"> </span>
<span class="text-2">Text 2</span>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
