Question

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

HTML

DynamoHTTPRequest

CSS

<!-- 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>

我的问题是，无论我把.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在页面上保持左对齐状态。有人可以帮忙吗？

Answer 1

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

如果添加以下样式，则会修复错误：

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

Example bootply

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

Example bootply 2

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

1 个答案: