Html 需要帮助集中我的cta吗

好吧，我似乎不能集中我的行动号召，有什么想法为什么它停留在左边？请记住，我使用的是引导和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>

---

先试试这个

<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 center-block">Learn more</div>
  </div>
</div>`

---

边距：0自动

不工作，因为

内联块

显示。 去掉这条线，给你的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;
}

---

最简单的解决方案是从

.cta

元素中删除

display:inline block

。这将导致CTA居中

.jumbotron{
高度：100vh；
背景图片：url（“/img/jumbog.png”）；
背景尺寸：封面；}
导航ul{
列表样式：无；}
李国荣{
显示：内联；
浮动：对；
利润率：20px；
填充：0px；
页边距顶部：0px；}
.cta{
边框：1px实心#FFFFFF；
边界半径：100px；
字体系列：Avenir Light；
字号：20.25px；
颜色：#FFFFFF；
填充：10px 20px；
文本对齐：居中；
边距：0自动；}

主页
关于
工作
联系人

名称
次要文本

了解更多

width: 50%;
margin: 0 auto;

.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;
}