Нужна помощь по центрированию моего cta

Question

Итак, я наклоняю, кажется, центр моего призыва к действию, любые идеи, почему он застрял влево? имейте в виду, что им используется бутстрап и сасса.

и css. Нужен ли мне партер с меткой позиции?

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

Answer 1

margin: 0 auto не работает из-за inline-block дисплея. удалите эту строку и дайте свой 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; 
} 

Answer 2

попробовать это первый

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

второй варианты: - внутри CSS добавить

width: 50%; 
margin: 0 auto; 

Answer 3

Самым простым решением будет удалить display: inline-block из .cta элемента. Это вызовет центр CTA.

.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; 
 
    padding: 10px 20px; 
 
    text-align: center; 
 
    margin: 0 auto; }

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

Вот working JSFiddle