HTML - float div 中的中心标签

Question

我有一组 float 的 div。我在其中一些 div 中有一个标签。我希望标签垂直居中。我已经尝试了在堆栈溢出问题上建议的各种选项。但是，到目前为止，他们都没有帮助过我。我可以请求帮助来解决这个问题吗？

这是一个示例:

<div class="lv_props">
    <div style="float: left"  class="float_d">
        <label>hello 1</label>
    </div>
    <div style="float: left"  class="float_d">
        <label>hello 2</label>
    </div>
    <div style="float: left"  class="float_d">
        <label>hello 3</label>
    </div>
</div>

label{
    display: inline;
}

.float_div {
    margin-left: 3%;
    text-align: center;
    vertical-align: middle;
}

.lv_props {
    padding-left:4%;
    text-align: center;
    vertical-align: middle;
}

Answer 1

您要求垂直对齐，vertical-align: middle; 无法按您预期的方式工作。一个简单的解决方案是将 line-height 设置为与容器上的 height 相同的值。这仅在您的标签像示例中那样只有一行时才有效。如果您的标签文本较长且跨越一行以上，请提供更好的示例以便我们为您提供帮助

在您的示例中，所有标签及其容器的高度都相同，因此很难展示垂直对齐的效果。出于这个原因，我在容器上设置了 100px 的高度，所以解决方案是将 line-height 也设置为 100px。我添加边框只是为了说明目的。

label{
  display: inline;
  border: 1px solid black;
}

.float_d {
  float: left;
  margin-left: 3%;
  text-align: center;
  width: 100px;
  height: 100px;
  line-height: 100px;
  border: 1px solid red;
}

.lv_props {
  padding-left:4%;
}

<div class="lv_props">
  <div class="float_d">
    <label>hello 1</label>
  </div>
  <div class="float_d">
    <label>hello 2</label>
  </div>
  <div class="float_d">
    <label>hello 3</label>
  </div>
</div>