我在引导jumbotron中的一个按钮居中时遇到问题。我已经尝试过使用文本居中对齐、边距自动0像素和其他解决堆栈溢出的方法。我把我的纽扣放在一个集装箱里,这个集装箱在大客车里。我不想使容器居中,因为随后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;
}
最佳答案
在.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>
密码笔:https://codepen.io/Omi236/pen/JJVENE?editors=1100