按钮在div内不中心对齐

Question

我试图水平中心对齐在div底部的一个按钮。我读了一些帖子，他们都建议在父div上使用文本对齐:center；，但这对我来说不管用。

CSS：

  .col-lg-3{
    text-align: center;
  }
  .btn-primary{
    position: absolute;
    bottom: 0;

HTML：

          <div class="col-lg-3">
            <h1 class="display-6">Lorem Ipsum</h1>
            <p class="text">123456789</p>
            <button onclick="window.location.href='projects/test.html'" type="button" class="btn btn-primary" style="margin:0 auto;display:block;">Learn More</button>
          </div>

当我运行这段代码时，按钮位于div的底部，但没有中心对齐。有人能帮我解决这个问题吗？

谢谢

Answer 1

因为它是绝对位置的position: absolute;，所以您必须这样做：

.btn-primary{
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}

注意：，如果父div的高度是auto，并且随着您不需要的内容而发生变化，则position: absolute;只需删除position: absolute;和bottom: 0;

Answer 2

最干净的解决方案是删除position: absolute，这需要将left和right设置为中心。这是不必要的，因为按钮将以父键的text-align: center CSS为中心。这是足够的水平中心。

 .col-lg-3{
    text-align: center;
 }

举例说明。

​

​