在引导4中垂直对齐中心

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

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

当前回答

将你的内容放在一个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 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

使用这个引导4个类:

Method1:

父:d表和子:d-table-cell & align-middle & text-center

eg:

<div class="tab-icon-holder d-table bg-light">
   <div class="d-table-cell align-middle text-center">
     <img src="assets/images/devices/Xl.png" height="30rem">
   </div>
</div>

如果你想让父母圆:

<div class="tab-icon-holder d-table bg-light rounded-circle">
   <div class="d-table-cell align-middle text-center">
     <img src="assets/images/devices/Xl.png" height="30rem">
   </div>
</div>

这两个自定义CSS类如下:

.tab-icon-holder {
  width: 3.5rem;
  height: 3.5rem;
 }
.rounded-circle {
  border-radius: 50% !important
}

最后的用法可以是这样的:

<div class="col-md-5 mx-auto text-center">
    <div class="d-flex justify-content-around">
     <div class="tab-icon-holder d-table bg-light rounded-circle">
       <div class="d-table-cell align-middle text-center">
         <img src="assets/images/devices/Xl.png" height="30rem">
       </div>
     </div>

     <div class="tab-icon-holder d-table bg-light rounded-circle">
       <div class="d-table-cell align-middle text-center">
         <img src="assets/images/devices/Lg.png" height="30rem">
       </div>
     </div>

     ...

    </div>
</div>

Method2: 你可以使用以下方法:

父项:h-100 d-table mx-auto 和 d-table-cell align-middle

Method3:

你可以使用以下方法:

父项:d-flex align-items-center

如果你想让内容水平居中:

父级:d-flex align-items-center justify-content-center

2020-03-12 09:40:14

在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 5中我们可以很容易地做到这一点。下面是一个对齐卡片的例子。我们只需要设置卡片宽度，然后其余设置都是使用bootstrap 5类。

<div class="container d-flex vh-100">
  <div class="row mx-auto">
    <div class="col align-self-center p-4">
      <div class="card rounded-3 shadow-sm p-3" style="width:400px">
        <div class="card-body">
          <h1>I'am centered vertically and horizontally</h1>
        </div>
      </div>
    </div>
  </div>
</div>

2021-07-08 03:12:47

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</head>
<body>  
<div class="container">
    <div class="row align-items-center justify-content-center" style="height:100vh;">     
         <div>Center Div Here</div>
    </div>
</div>
</body>
</html>

2019-01-23 12:45:49

在引导4中垂直对齐中心

推荐文章

最新文章

标签