如何在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中居中按钮？

回答

相关问题