bootstrap 4和laravel中的垂直居中问题

Question

我正在尝试将我的专栏内容垂直居中。

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

<div class="container d-flex h-100">

  <div class="row mt-5 ">

    <div class="col-sm-7 about-us">

      <div class="row h-100 justify-content-center align-items-center">

        <h3 class="display-3 strong ">

          {{ __('Message From Chief ') }}

        </h3>

        <p>

          {{ __('This is a sample text') }}

        </p>

      </div>

    </div>

    <div class="col-sm-4">

      <img src="{{asset('img/user.jpg') }}" class="img img-fluid" alt="">

    </div>

  </div>

</div>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

但是当我尝试上面的代码时，它在标题和段落之间给了我一个巨大的差距。

那么我怎样才能正确地将我的文本垂直居中对齐以及我在这里做错了什么

我正在使用 Bootstrap 4 和 Laravel。

Answer 1

只需添加min-vh-100您的.container班级并添加align-content-center您的row班级即可。<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"><div class="container d-flex min-vh-100">&nbsp; <div class="row">&nbsp; &nbsp; <div class="col-sm-7 about-us">&nbsp; &nbsp; &nbsp; <div class="row h-100 justify-content-center align-items-center align-content-center flex-column">&nbsp; &nbsp; &nbsp; &nbsp; <h3 class="display-3 strong ">Message From Chief</h3>&nbsp; &nbsp; &nbsp; &nbsp; <p>This is a sample text</p>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="col-sm-4">&nbsp; &nbsp; &nbsp; <img src="{{asset('img/user.jpg') }}" class="img img-fluid" alt="">&nbsp; &nbsp; </div>&nbsp; </div></div><script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script><script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

Answer 2

只需添加.h-100您的 .container 类，添加.h-100您的 row 类并添加.my-auto您的 col 类。<div class="container h-100">&nbsp; <div class="row h-100">&nbsp; &nbsp; <div class="col-sm-7 about-us my-auto">&nbsp; &nbsp; &nbsp; <div class="row h-100 justify-content-center align-items-center">&nbsp; &nbsp; &nbsp; &nbsp; <h3 class="display-3 strong ">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {{ __('Message From Chief ') }}&nbsp; &nbsp; &nbsp; &nbsp; </h3>&nbsp; &nbsp; &nbsp; &nbsp; <p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {{ __('This is a sample text') }}&nbsp; &nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="col-sm-4">&nbsp; &nbsp; &nbsp; <img src="{{asset('img/user.jpg') }}" class="img img-fluid" alt="">&nbsp; &nbsp; </div>&nbsp; </div></div>