flexbox中的Bootstrap 4文本中心不起作用答案

【问题标题】：Bootstrap 4 text-center in flexbox not workingflexbox中的Bootstrap 4文本中心不起作用
【发布时间】：2017-02-03 20:29:43
【问题描述】：

我正在尝试将我的网页分成两个垂直列，单击它们可以将您带到正确的页面。我已经走到这一步了。

HTML

<!-- Choices -->
<div class="container-fluid">
    <div class="row">
        <div class="col-md-6 col-xs-12 vertical-center webd">
            <h1 class="text-muted text-center">Web Design</h1>
        </div>
        <div class="col-md-6 col-xs-12 vertical-center circ">
            <h1 class="text-muted text-center">Circus</h1>
        </div>
    </div>
</div>

CSS

.vertical-center {
    min-height: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.webd {
    background-image: url('webd.jpg');
}

.circ {
    background-image: url(circ.JPG);
}

我的问题是，无论我把 text-center 类放在哪里。我的<h1>s 在页面上保持左对齐。有人可以帮忙吗？

【问题讨论】：

你是要对齐h1本身，还是只对齐里面的文字内容？

标签： css html twitter-bootstrap bootstrap-4

【解决方案1】：

这是因为您已将 display flex 添加到父容器。这意味着孩子不再是全宽了。

如果您添加以下样式，它将修复您的错误：

.vertical-center > .text-center 
{
    flex-grow: 1;
}

Example bootply

如果您不想让孩子长大，您可以将以下内容添加到您的垂直中心：justify-content: center;

Example bootply 2

【讨论】：