Question

我在引导式超级跑步机中按下按钮时遇到了麻烦。我尝试在Stack Overflow上使用文本对齐中心，margin auto 0 px和其他解决方案。我把按钮放在一个容器内，这个容器位于超大屏幕内。我不想让容器居中，因为那时jumbotron上的文字也会居中，这是我不想要的。我只想让按钮居中。

这是我的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;

，请将其对齐

OR

只需在text-center上应用container div inside jumbotron课程，然后定位标题并将其文字对齐为左侧。

<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>

Codepen：https://codepen.io/Omi236/pen/JJVENE?editors=1100

Answer 2

将其包裹在text-center类的div中。

    <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>
            <div class="text-center">
              <button type="button" class="btn btn-primary text-center">
                 Projects
              </button>
            </div>
         </div>
      </div>

Answer 3

将您的按钮包裹在div＆amp;在其上应用以下样式：

.wrapper {
      width: 100px;
      margin: 150px auto;
 }

HTML就像：

<div class="wrapper">
     <button type="button" class="btn btn-primary text-center">
</div>

如何在Bootstrap的Jumbotron中居中按钮？

3 个答案: