javascript - 如何在 Bootstrap Jumbotron 中将按钮居中？

Question

我在 Bootstrap 超大屏幕中将按钮居中时遇到问题。我已经尝试在 Stack Overflow 上使用 text align center、margin auto 0 px 和其他解决方案。我的按钮位于超大屏幕内的容器内。我不想将容器居中，因为那样的话超大屏幕上的文本也会居中，这是我不想要的。我只想让按钮居中。

这是我的HTML代码

<div class="jumbotron">
     <div class="container" >
        <h2>Keep your heart as if you have just entered this world and your mind as if you have lived it one hundred times.</h2>
        <button type="button" class="btn btn-primary text-center">
           Projects
        </button>
     </div>
  </div>

这是我的 CSS 代码

.jumbotron {
padding: 20em;
background-image: url("../img/website-background.jpg") !important;
height: 100%; 

/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}

.jumbotron .container h2 {
color: white;
position: relative;
bottom: 100px;
}
.jumbotron .container button {
text-align: center;
}

Answer 1

在 .jumbotron .container 上应用 text-align: center; 这也会将标题居中对齐，因此目标 .jumbotron .container h2 如果你想使用 text-align: left;

将其左对齐

或

只需在 jumbotron 内的容器 div 上应用 text-center 类，然后定位标题并将其文本左对齐。

<div class="jumbotron">
  <div class="container text-center">
    <h2 class="text-left">Keep your heart as if you have just e it one hundred times.</h2>
    <button type="button" class="btn btn-primary text-center">Projects</button>
  </div>
</div>

代码笔:https://codepen.io/Omi236/pen/JJVENE?editors=1100