需要幫助集中我的cta

好吧，所以我似乎無法集中我的呼籲行動，任何想法爲什麼它卡在左邊？請記住，即時通訊使用引導和sass需要幫助集中我的cta

<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。我需要一個帶位置標籤的parrent嗎？

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

來源

2016-01-23 Sondre Skei

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

來源

2016-01-23 17:25:53

試試這個第一

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

來源

2016-01-23 17:22:00 PizzaBoy

的最簡單的解決方案將是，以從.cta元件除去display: inline-block。這將導致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

來源

2016-01-23 17:31:48

需要幫助集中我的cta

回答

相關問題