Question

请参阅jsfiddle项目here。如何水平对齐框和标签？

.box {
  display: inline-block;
  height: 20px;
  width: 30px;
  border: 1px solid;
}

.legend {
  horizontal-align: middle;
}

<div class="legend">
  <div class="box" style="background-color: red;">
  </div>
  <span>Alabama</span>
</div>

Answer 1

在.box div上设置vertical-align属性似乎最有意义并导致问题最少。

.box {
  display: inline-block;
  height: 20px;
  width: 30px;
  border: 1px solid;
  vertical-align: middle;
}

<div class="legend">
  <div class="box" style="background-color: red;">
  </div>
  <span>Alabama</span>
</div>

Answer 2

我认为你的意思是垂直对齐？如果你只是试图垂直对齐，那么显示两个不等高度的div：inline-block是最简单和最有效的方法。你几乎把它与你的代码一起使用，但是浮动打破它。不要使用浮动！

＆＃13;

.box {
  background-color: red;
  border: 1px solid;
  height: 20px;
  width: 30px;
}

.box,
.legend {
  display: inline-block;
  vertical-align: middle;
}

＆＃13;

  <div class="box"></div>
  <div class="legend">Alabama</div>

＆＃13;

enter link description here

Answer 3

您可以浮动框而不是内联显示它。有几种不同的方法来协调这些。

https://jsfiddle.net/cckxkvov/5/

.box {
  float: left;
  height: 20px;
  width: 30px;
  border: 1px solid;
}

.legend {
  horizontal-align: middle;
}

span {
  display: inline-block;
  line-height: 20px; 
}

Answer 4

为什么不使用flexbox？

如果您尝试垂直对齐.legend中的两个项目，则只需应用以下样式：

.legend {
  display: flex;
  align-items: center;
}

请注意，您需要为跨浏览器兼容性应用前缀。

使用css垂直对齐div和span

4 个答案: