有什么方法可以在中心对齐 jumbotron 元素？ [复制]答案

【问题标题】：Is there any way to align jumbotron elements in center? [duplicate]有什么方法可以在中心对齐 jumbotron 元素？ [复制]
【发布时间】：2020-10-13 04:43:30
【问题描述】：

在下面的代码 sn-p 中，我尝试将 .jumbotron 内的 div 与中心对齐，但没有成功。是否需要额外的课程，因为我已经尝试过.justify-content-center 和.mx-auto。

<!-- CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- EndCSS -->

<div class="jumbotron">
  <div class="justify-content-center">
    <h1 class="display-3">Lorem.</h1>
    <p class="lead">Lorem, ipsum dolor.<span class="text-     
      warning">Lorem, ipsum.</span><br>Lorem ipsum dolor 
      sitamet.
    </p>
  </div>
</div>

<!-- JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<!-- EndJS -->

【问题讨论】：

使用flex 和justify-content:center; 到jumbotron jsfiddle.net/Manju06/qr6wLx5t/44

标签： html css twitter-bootstrap-3 bootstrap-4

【解决方案1】：

您可以使用以下解决方案：

将d-flex 设置为jumbotron 以在jumbotron 上使用弹性类（如justify-content-center）。
将justify-content-center 设置为jumbotron 本身以使其内容居中。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<div class="jumbotron d-flex justify-content-center">
  <div>
    <h1 class="display-3">Lorem.</h1>
    <p class="lead">Lorem, ipsum dolor.<span class="text-     
      warning">Lorem, ipsum.</span><br>Lorem ipsum dolor 
      sitamet.
    </p>
  </div>
</div>

【讨论】：

.d-inline-block 不需要，因为您将使用 flexbox

【解决方案2】：

bootstrap 的文本中心类可能会有所帮助

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

<div class="jumbotron text-center">
    <h1 class="display-3">Lorem.</h1>
    <p class="lead">Lorem, ipsum dolor.<span class="text-     
      warning">Lorem, ipsum.</span><br>Lorem ipsum dolor sitamet.
    </p>
</div>

【讨论】：

【解决方案3】：

<!-- CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- EndCSS -->

<div class="jumbotron">
 <div class="d-flex flex-row justify-content-center">
    <h1 class="display-3">Lorem.</h1>
    <p class="lead">Lorem, ipsum dolor.<span class="text-     
      warning">Lorem, ipsum.</span><br>Lorem ipsum dolor 
      sitamet.
    </p>
  </div>
</div>

<!-- JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<!-- EndJS -->

【讨论】：

【解决方案4】：

请试试这段代码，有没有办法让jumbotron元素居中对齐？

<!DOCTYPE html>
<html>
<head>

  <!-- Credit: http://stackoverflow.com/questions/22196587/how-to-center-align-vertically-the-container-in-bootstrap -->
  <title>Bootstrap Centered Jumbotron</title>
  <meta charset="utf-8" />

  <link type="text/css" rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css" />
  <style type="text/css">

    html, body {
      height: 100%;
    }

    .container{
      width: 1025px;
    }

    .vertical-center {
      height: 100%;
      width: 100%;

      text-align: center;  /* align the inline(-block) elements horizontally */
      font: 0/0 a;         /* remove the gap between inline(-block) elements */
    }

    .vertical-center:before {    /* create a full-height inline block pseudo=element */
      content: ' ';
      display: inline-block;
      vertical-align: middle;  /* vertical alignment of the inline element */
      height: 100%;
    }

    .vertical-center > .container {
      max-width: 100%;
      background-color: gold;

      display: inline-block;
      vertical-align: middle;  /* vertical alignment of the inline element */
      font: 16px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;        /* <-- reset the font property */
    }

    @media (max-width: 768px) {
      .vertical-center:before {
        /* height: auto; */
        display: none;
      }
    }

  </style>

</head>
<body>

  <div class="jumbotron vertical-center">
    <div class="container text-center">

      <h1>The easiest and powerful way</h1>

      <div class="row">

        <div class="col-md-7">
          <div class="top-bg"></div>
        </div>

        <div class="col-md-5 iPhone-features" style="margin-left:-25px;">
          <ul class="top-features">
            <li>
              <span><i class="fa fa-random simple_bg top-features-bg"></i></span>
              <p><strong>Redirect</strong><br>Visitors where they converts more.</p>
            </li>
            <li>
              <span><i class="fa fa-cogs simple_bg top-features-bg"></i></span>
              <p><strong>Track</strong><br>Views, Clicks and Conversions.</p>
            </li>
            <li>
              <span><i class="fa fa-check simple_bg top-features-bg"></i></span>
              <p><strong>Check</strong><br>Constantly the status of your links.</p>
            </li>
            <li>
              <span><i class="fa fa-users simple_bg top-features-bg"></i></span>
              <p><strong>Collaborate</strong><br>With Customers, Partners and Co-Workers.</p>
            </li>
            <a href="pricing-and-signup.html" class="btn-primary btn h2 lightBlue get-Started-btn">GET STARTED</a>
            <h6 class="get-Started-sub-btn">FREE VERSION AVAILABLE!</h6>
          </ul>
        </div>

      </div>

    </div>
  </div>

  <!-- JavaScript -->
  <script src="http://code.jquery.com/jquery.min.js"></script>
  <script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>

</body>
</html>

希望这段代码对你有用。

谢谢。

【讨论】：