Question

我想在引导程序4中居中放置一个容器。我有一个宽度为300px的元素，

.guide-background{
    background: url("https://www.webascender.com/wp-content/uploads/executive-guide-1.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    height: 350px;
    /*filter: brightness(50%);*/
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
 <section id="guide" class="guide-background">
       
       <!-- I want to center this container with id #center_it -->
       
       <div class="container border border-danger" id="center_it">
           <div class="row">
               <div class="col align-self-center">
                   <h2 class="text-center"> <a href="" class="">Center Me</a></h2>
               </div>
           </div>
       </div>
       
   </section>

然后我将一个容器放入其中，然后如何将容器居中放置。我试图用网格系统做到这一点。但是我失败了。真的需要帮助

Answer 1

您可以为此使用flex显示，https://getbootstrap.com/docs/4.0/utilities/flex/此处已经提供了Bootstrap。

.guide-background {
  background: url("https://www.webascender.com/wp-content/uploads/executive-guide-1.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  height: 350px;
  /*filter: brightness(50%);*/
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<section id="guide" class="guide-background  d-flex align-items-center flex-colum">

  <!-- I want to center this container with id #center_it -->

  <div class="container border border-danger" id="center_it">
    <div class="row n">
      <div class="col  align-self-center ">
        <h2 class="text-center"> <a href="" class="">Center Me</a></h2>
      </div>
    </div>
  </div>

</section>

如何在给定高度将靴子4中的容器居中放置？

1 个答案: