Question

我有一组浮动的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

我必须对您的代码执行的操作是将float_d类设置为固定宽度。居中文本需要一个固定宽度的容器：

只需添加：

width: 30%;

到你的.float_d班。

请参阅JSFiddle.net上的working example。

Answer 2

更新以下课程。

.lv_props {
    padding-left:4%;
    display: table;
    margin: 0 auto;
}

这是Demo。

Answer 3

您要求垂直对齐，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>

HTML - 浮动div

3 个答案: