Question

我正在尝试将文本放在div中（垂直和水平），但我使用bootstrap3网格系统，所以我似乎无法找到适用的答案。我找到的大多数答案都需要一张桌子。

这是我的标记：

<div class="row">

    <div class="col-xs-4">
        This is the text that I want to center...
    </div>


    <div class="col-xs-4">
        This is the text that I want to center...
    </div>


    <div class="col-xs-4">
        This is the text that I want to center...
    </div>

</div>

Answer 1

 <div class="row">

    <div class="col-xs-4" style="text-align:center; vertical-align:middle">
        This is the text that I want to center...
    </div>


    <div class="col-xs-4" style="text-align:center; vertical-align:middle">
        This is the text that I want to center...
    </div>


    <div class="col-xs-4" style="text-align:center; vertical-align:middle">
        This is the text that I want to center...
    </div>

</div>

最好是创建类似CSS类的

   .cAlign{
        text-align:center;
vertical-align:middle
    }
<div class="row">

    <div class="col-xs-4 cAlign">
        This is the text that I want to center...
    </div>


    <div class="col-xs-4 cAlign">
        This is the text that I want to center...
    </div>


    <div class="col-xs-4 cAlign">
        This is the text that I want to center...
    </div>

</div>

Answer 2

<div class="row">

    <div class="col-xs-4 text-center" style="vertical-align: middle;">
        This is the text that I want to center...
    </div>


    <div class="col-xs-4 text-center" style="vertical-align: middle;">
        This is the text that I want to center...
    </div>


    <div class="col-xs-4 text-center" style="vertical-align: middle;">
        This is the text that I want to center...
    </div>

</div>

Answer 3

2013年，您应该考虑使用绝对居中方法。

添加到您的CSS：

.hv-center-wrap {
  position: relative;
}

.hv-center {
  position: absolute;
  overflow: auto;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 400px;
  height: 500px; /* height must be set to work, percentages will work */
}

将类.hv-center添加到您希望水平和垂直居中的任何元素。然后将元素包裹在外部div .hv-center-wrap周围。

（vertical-align: middle不会垂直居中。这仅适用于特定元素，而不适用于div。）

在Div中引导文本：引导程序

3 个答案: