在引导4中垂直对齐中心

我试图用Bootstrap 4在页面中间居中我的容器。到目前为止我还没有成功。任何帮助都将不胜感激。

我在Codepen建立了它。io，所以你们可以玩它，让我知道什么工作，因为我的想法……

当前回答

Bootstrap 4.1.3中:

当我试图在容器>行>列旁边的h1标题中居中引导徽章时，这为我工作。

工作的是一些简单的css:

.my-valign-center {
  vertical-align: 50%;
}

<span class="badge badge-pill" style="vertical-align: 50%;">My Badge</span>

2018-08-29 17:49:44

其他回答

你可以通过使父容器伸缩并添加align-items来垂直对齐你的容器:

body {
  display:flex;
  align-items:center;
}

更新的钢笔

2017-02-15 14:47:28

将你的内容放在一个100%高的flexbox容器中，即h-100。然后使用justify-content-center类对内容进行集中验证。

<section class="container h-100 d-flex justify-content-center">
    <div class="jumbotron my-auto">
        <h1 class="display-3">Hello, Malawi!</h1>
    </div>
</section>

2019-12-06 11:34:10

在Bootstrap 4 (beta)中，使用align-middle。参考Bootstrap 4关于垂直对齐的文档:

使用vertical-alignment改变元素的对齐方式实用工具。请注意，垂直对齐只影响内联，内联块、内联表和表单元格元素。选择。align-baseline， .align-top， .align-middle， .align-bottom， .align-text-bottom和.align-text-top。

2017-10-15 13:30:27

因为以上这些对我都没用，所以我再加上一个答案。

目标:使用bootstrap 4 flexbox类在页面上垂直和水平对齐div。

第一步:设置最外层div的高度为100vh。这将高度设置为Veiwport高度的100%。如果你不这么做，其他什么都不管用。将它的高度设置为100%只是相对于父级，所以如果父级不是视口的全高，什么都不会起作用。在下面的例子中，我将Body设置为100vh。

步骤2:将容器div设置为带有d-flex类的flexbox容器。

步骤3:用justify-content-center类水平居中div。

第四步:用align-items-center将div垂直居中

第五步:运行页面，查看垂直和水平居中的div。

注意，在居中的div本身(子div)上没有需要设置的特殊类。

<body style="background-color:#f2f2f2; height:100vh;">

<div class="h-100 d-flex justify-content-center align-items-center">
    <div style="height:600px; background-color:white; width:600px;">
</div>

</div>

</body>

2018-09-30 11:01:04

对于所有Bootstrap版本2,3,4和5，只有两个自定义类适用于任何高度和宽度。

.d_tbl{ display:table; width:100%; height:200px; } .d_tblCel{ vertical-align: middle; display: table-cell; text-align: center; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="d_tbl" style="background-color:antiquewhite"> <div class="d_tblCel"> <h3>Centered horizontally and vertically</h3> <p>for all bootstrap versions with only two custom classes</p> </div> </div> </div> </body> </html>

2021-10-30 07:37:19

在引导4中垂直对齐中心

推荐文章

最新文章

标签