有什么方法可以将超大屏幕元素居中对齐？

Question

在下面的代码片段中，我尝试将 .jumbotron 内的 div 与中心对齐，但没有成功。是否需要额外的 class 因为我已经尝试过 .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 -->

Answer 1

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

将 d-flex 设置为 jumbotron 以在超大屏幕上使用 flex 类（如 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>

Answer 2

text-center class of 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>

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

Answer 4

请试试这个代码，有没有什么方法可以将超大屏幕元素居中对齐？

<!DOCTYPE html>
<html>
<head>

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

希望这段代码对你有用。

谢谢。

有什么方法可以将超大屏幕元素居中对齐？

Is there any way to align jumbotron elements in center?

html

css

twitter-bootstrap-3

bootstrap-4