跨度垂直与浮动对齐 [英] Spans vertical align with float

问题描述

我在div中垂直对齐3个跨度时遇到问题。这很容易实现，但是当我使用float时，垂直对齐不起作用。我希望该浅蓝色条垂直居中。代码：

I have a problem with vertically align 3 spans inside a div. It's easy to achieve, but vertical align doesn't work when i use float. I want that lightblue bar to be vertically centered. Code:

.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

推荐答案

您可以使用 display：inline-block ; 和 vertical-align：middle; 放在< span> 元素上浮点数。这样，它们也可以彼此相邻放置，您可以应用垂直对齐方式：

You can use display: inline-block; along with vertical-align: middle; on your <span> elements instead of float. This way they are positioned next to each other too and you can apply the vertical alignment:

.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>

这篇关于跨度垂直与浮动对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！