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-centerclass="row&nbsp;justify-content-center&nbsp;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">&nbsp; &nbsp; &nbsp;<div class="row justify-content-center text-center">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<h1><strong>+100</strong></h1>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<h1><strong>+100</strong></h1>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<h1><strong>+100</strong></h1>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp;</div></div>