Question

我知道如何通过减小内部div的高度来垂直对齐文本，并将其分配给顶部，底部，左侧，右侧= 0，边距：自动属性的绝对定位我也知道display:flex布局但它也无法正常工作。问题是display:table，vertical-align无法正常使用引导类。我的div很简单我给它指定了合适的高度，我的内部div已经减小了高度，所以它应该垂直对齐，但它没有。我用过bootstrap。我不想用绝对位置来居中它。有什么想法吗？

<div class="col-sm-3" style="height:65px;display:table;vertical-align:middle;">
    <div style="display:table-cell;vertical-align:middle">abcabcabc</div>
</div>

Answer 1

使用bootstrap时，使用“display：inline block”

进行垂直对齐

.vcenter {
  display: inline-block;
  vertical-align: middle;
  float: none;
}

您可以在此处查看 - http://plnkr.co/edit/vPKRjAf4wgtzJ7VVdOPN?p=preview

Answer 2

使用line-height怎么样？如果line-hight等于其hight，则文字垂直居中

#test {
  width: 100%;
  height: 100px;
  background-color: green;
  line-height: 100px;
  font-size: 32px;
  text-align: center;
}

<div id="test">
  Test Text
</div>

希望这有帮助

Answer 3

问题在于我的div，我在删除东西时设定了它的尺寸，然后解决了问题。感谢。

vertical-align文本不适用于bootstrap类

3 个答案: