Flexbox中的Bootstrap 4文本中心无法正常工作

Question

我正在尝试将我的网页拆分为两个垂直列,可以单击这些列以将您带到正确的页面.我已经走到了这一步.

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>在页面上保持左对齐.有人可以帮忙吗？

Answer 1

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

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

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

示例bootply

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

示例bootply 2