好的,所以我似乎无法将号召性用语居中,知道为什么它卡在左边吗?请记住,我使用的是 bootstrap 和 sass
<div class="jumbotron">
<nav>
<div class="row">
<div class="col-md-12">
<ul>
<li class="p_nav">Home</li>
<li class="p_nav">About</li>
<li class="p_nav">Work</li>
<li class="p_nav">Contact</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h1>Name</h1>
<p class="p_jumbo">secondary text</p>
<div class="cta">Learn more</div>
</div>
</div>
和CSS。我可能需要一个带有位置标签的 parent 吗?
.jumbotron {
height: 100vh;
background-image: url("/img/jumbobg.png");
background-size: cover; }
nav ul {
list-style: none; }
nav ul li {
display: inline;
float: right;
margin: 20px;
padding: 0px;
margin-top: 0px; }
.cta {
border: 1px solid #FFFFFF;
border-radius: 100px;
font-family: Avenir-Light;
font-size: 20.25px;
color: #FFFFFF;
display: inline-block;
padding: 10px 20px;
text-align: center;
margin: 0 auto; }
最佳答案
由于 inline-block
显示,margin: 0 auto
不工作。
删除这条线并给你的 cta 一个宽度。
.cta {
border: 1px solid #FFFFFF;
border-radius: 100px;
font-family: Avenir-Light;
font-size: 20.25px;
color: #FFFFFF;
/* display: inline-block; */
padding: 10px 20px;
text-align: center;
margin: 0 auto;
width: 200px;
}
关于html - 需要帮助集中我的 cta,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34966397/