Bootstrap 4中的垂直对齐方式

Question

Bootstrap 4中的垂直对齐方式

bootstrap-4twitter-bootstrap-4

33

我在 Bootstrap 4 中有以下设置：Bootply 链接

带有“Supplier”文本的元素应该垂直居中，我有不同的行使用相同的代码，我想让它们居中。目前没有任何解决方案适用于我的情况。

能否有人找到我做错了什么，并指导我正确的方向？

谢谢。

- Nelsch

我会使用Bootstraps v4 flexbox grid version，它有许多功能，比如垂直对齐。 - Vucko

2个回答

3

为使页面上的主元素在垂直方向居中，可以使用.my-auto类，并在其之前的每个元素上应用全高度。有以下几种方法之一：

.h-100 Bootstrap 类
height: 100vh; 样式
height: 100%; 样式

示例：

<body class="h-100">
  <div class="container h-100">
    <div class="row h-100">
      <div class="col-12 my-auto"> <!-- Finally! -->
        <div class="jumbotron">
          ...
        </div>
      </div>
    </div>
  </div>
</body>

- Sky7ure

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Zim · Accepted Answer

~~您可以像这样使用flex-xs-middle类..~~

Bootstrap 4 Alpha 5

注：此处为已翻译内容，无需再次翻译。

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-6">
            <div class="circle-medium backgrounds"></div>
        </div>
        <div class="col-xs-6 flex-xs-middle">
            <div class="name">Supplier</div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-6">
            <div class="circle-medium backgrounds"></div>
        </div>
         <div class="col-xs-6 flex-xs-middle">
            <div class="name">Supplier</div>
        </div>
    </div>
</div>

http://www.codeply.com/go/PNNaNCB4T5 （使用启用了Flexbox的Bootstrap 4 CSS）

Bootstrap 4

Bootstrap 4.0.0更新

现在，Bootstrap 4默认使用flexbox，有许多不同的方法可以使用auto-margins、flexbox utils或display utils以及vertical align utils进行垂直对齐。起初，“垂直对齐工具”似乎很明显，但这些工具仅适用于内联和表格显示元素。以下是Bootstrap 4的垂直居中选项。记住，垂直对齐是相对于父级高度的。

1 - 使用自动边距垂直居中：

另一种垂直居中的方法是使用 my-auto。这将在其容器内居中该元素。例如，h-100 使行具有全高度，并且 my-auto 将垂直居中 col-sm-12 列。

<div class="row h-100">
    <div class="col-sm-12 my-auto">
        <div class="card card-block w-25">Card</div>
    </div>
</div>

使用自动外边距实现垂直居中演示

my-auto 代表在垂直 y 轴上的外边距，相当于：

margin-top: auto;
margin-bottom: auto;

2 - 使用Flexbox实现垂直居中：

自从Bootstrap 4开始，.row现在是display:flex，你可以在任何列上简单地使用align-self-center来垂直居中它...

       <div class="row">
           <div class="col-6 align-self-center">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

或者，在整个 .row 上使用 align-items-center，以垂直居中对齐行中的所有 col-*。

       <div class="row align-items-center">
           <div class="col-6">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

垂直居中不同高度的列示例

重要提示: 要对齐的元素的直接父级必须有定义的高度！

3 - 使用Display Utils实现垂直居中:

Bootstrap 4有显示工具，可以用于display:table、display:table-cell、display:inline等。这些可与垂直对齐工具一起使用，以使内联、内联块或表格单元格元素垂直对齐。

<div class="row h-50">
    <div class="col-sm-12 h-100 d-table">
        <div class="card card-block d-table-cell align-middle">
            I am centered vertically
        </div>
    </div>
</div>

使用Display Utils实现垂直居中演示