Bootstrap 没有完美地将内容居中

Question

我有这个简单的代码：      <div class="container branduri justify-content-center">    <div class="row justify-content-center"> <div class="col-xl-4">  <h1><strong>+100</strong></h1> </div> <div class="col-xl-4">  <h1><strong>+100</strong></h1> </div> <div class="col-xl-4">   <h1><strong>+100</strong></h1> </div>问题是，在我的网站上，正如您在附图中看到的那样，列没有完美居中。为什么？

Answer 1

在行 div 上添加 bootstrap 类text-center

class="row justify-content-center text-center"

Answer 2

您只需将此属性添加到行text-align:center;或添加 Bootstrap 类，即可将每列中的文本居中text-center，如下所示：

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

<div class="container branduri justify-content-center">

     <div class="row justify-content-center text-center">

          <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">

               <h1><strong>+100</strong></h1>

          </div>

          <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">

               <h1><strong>+100</strong></h1>

          </div>

          <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">

               <h1><strong>+100</strong></h1>

          </div>

     </div>

</div>