与浮子垂直对齐

Question

我有一个问题，垂直对齐3跨在一个div内。这是很容易实现，但垂直对齐不工作时，我使用浮子。我想要那个淡蓝色的酒吧垂直中心。代码：

​

.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">&nbsp;</span>
  <span class="text-2">Text 2</span>
</div>

​

非常感谢你的帮助。

JSFiddle

Answer 1

您可以在您的display: inline-block;元素上使用display: inline-block;和vertical-align: middle;，而不是浮点。通过这种方式，它们也被放置在一起，并且您可以应用垂直对齐：

​

.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">&nbsp;</span>
  <span class="text-2">Text 2</span>
</div>

​