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

我在自舉jumbotron中集中按鈕時遇到了問題。我曾嘗試使用文本對齊中心，邊距自動0 px和其他堆棧溢出解決方案。我的按鈕放在一個位於超大號內的容器內。我不想將容器居中，因爲那樣的話，jumbotron上的文字也會居中，這是我不想要的。我只是想讓按鈕居中。如何在Bootstrap的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; 
}

來源

2017-07-16 dogdog

-1

在.jumbotron .container申請text-align: center;這也將對齊中心標題因此目標.jumbotron .container h2並調整它留下，如果你想使用text-align: left;

只是適用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

來源

2017-07-16 14:06:16

你CodePen具有負的成績。這並不像他要求的那樣將按鈕居中，他也不想將標題文本居中。 – Win

@Win哦，我的壞，我忘了保存更改。再次看到並刪除否定的投票:) –

刪除！：）做得好。 – Win

-1

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

來源

2017-07-16 14:00:01 Win

-1

包裹一個div裏面的按鈕&適用於下列形式：

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

HTML會是這樣：

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

來源

2017-07-16 14:02:43

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

回答

相關問題