0

我试图将我的文本集中在一个 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>
4

3 回答 3

1 
<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>
于 2013-11-13T18:33:57.940 回答
0 
 <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>
于 2013-11-13T18:33:12.230 回答
0

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。）

于 2013-11-13T18:47:30.523 回答