跨越与浮动垂直对齐

Posted 2023-03-05

【中文标题】跨越与浮动垂直对齐

【英文标题】：Spans vertical align with float

【发布时间】：2017-03-21 17:49:13

【问题描述】：

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

非常感谢您的帮助。

JSFiddle

【问题讨论】：

那你为什么还要使用float？

【参考方案1】：

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

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