如何在CSS中正确使用display:block和按钮？

Question

当我使用display:block时，它不想以前工作过的工作。当我检查时，它显示我在display:block上删除了。现在按钮位于山口的右侧，我需要将它们放置在图像下方的中间。

html

<div class="sectionLight">

  <div class="row">

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

      <div class="row">

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

          <img class="img-fluid imgCenter" src="images/square.png">

          <div class="row">

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

              <button type="button" class="btn btn-danger btn-lg btnCenter" data-toggle="modal" data-target=".square-modal-lg">Prime</button>

            </div>

          </div>

        </div>

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

          <img class="img-fluid imgCenter" src="images/fibo.png">

          <div class="row">

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

              <button type="button" class="btn btn-danger btn-lg btnCenter" data-toggle="modal" data-target=".fibo-modal-lg">Fibo</button>

            </div>

          </div>

        </div>

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

          <img class="img-fluid imgCenter" src="images/square_copy.png">

          <div class="row">

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

              <button type="button" class="btn btn-danger btn-lg btnCenter" data-toggle="modal" data-target=".prime-modal-lg">Square</button>

            </div>

          </div>

        </div>

      </div>

    </div>

  </div>

</div>

CSS

.btnCenter {

  display: block;

  margin: auto;

  margin-top: 15px;

  margin-bottom: 20px;

  width: 50%;

}

Answer 1

您可能已经包含了另一个 css 脚本来覆盖当前的脚本。你可以尝试去做一下!important。如果这不起作用，您可能必须使您的选择器比当前覆盖它的选择器更具体。.btnCenter {&nbsp; display: block !important;&nbsp; margin: auto;&nbsp; margin-top: 15px;&nbsp; margin-bottom: 20px;&nbsp; width: 50%;}您可以在开发工具中对此进行调试。请参见下面的示例图片：在此示例中，primary.css 在 css 层次结构中处于较高位置（意味着该文件的primary.css包含时间晚于stacks.css），因此，它将覆盖选择器。