如何水平居中錨鏈接中的div？

我仔細研究過這一點，並按照一些指示，他們似乎並沒有工作。如何水平居中錨鏈接中的div？

請點擊此鏈接的代碼：父DIV

https://jsfiddle.net/3h937r1q/7/

我試過margin: 0 auto;（center-block類）和float: none;，但我似乎無法得到它的工作。任何人都可以幫助我中心div在頁面中間，並告訴我爲什麼它不工作？

預期的結果：https://jsfiddle.net/3h937r1q/22/

除非我不想用margin-left給它移動到中間

來源

2016-07-01 Andrew Kilburn

能否請您提供到目前爲止你已經嘗試了代碼的某些部分？ – AlbanianGamerYT

@AlbanianGamerYT如果你按照jsfiddle你會看到代碼 –

你的意思是垂直居中？ – adamk22

可以使用COL-偏移：

 <div class="col-xs-12 col-md-12 home-buttons center-block" > 
     <a href="#" class="col-xs-6 col-sm-4 col-md-2 HomepageBtn Animate col-sm-offset-2 col-md-offset-4" > 
      <div class="tile-text"> 
       AP REVIEW 
      </div> 
     </a> 
     <a href="#" class="col-xs-6 col-sm-4 col-md-2 HomepageBtn Animate"> 
      <div class="tile-text"> 
       VAT CHECKER 
      </div> 
     </a> 
    </div>

來源

2016-07-01 10:11:08

@Thanks，我知道但我想將其集中在頁面中。使用偏移不會將它居中在頁面中。這只是將其移動到中間位置 –

，但如果以正確的方式給出偏移量...它將已經在中心對齊... –

屏幕被分成12列...所以假設你有2列4和4長度的列....剩餘的長度是4，所以你需要給予2的偏移量以使它們在中心對齊... –

我已刪除height和給出padding: 40px 0px至anchor標記

Updated DEMO

.home-buttons .HomepageBtn { 
    background-color: #4F7F64; 
    /*height: 140px;*/ 
    padding: 40px 0px; 
    color: white; 
    font-size: small; 
    font-family: "futura-pt-n7", 'futura-pt', Helvetica, Arial, sans-serif; 
    font-weight: bold; 
    border-style: solid; 
    text-align: center; 
}

來源

2016-07-01 10:12:24 Manwal

嗨，對不起！我已經更新了我的問題，我的意思是中心div而不是文本。 –

在您的任務中添加預期的輸出圖像會更有幫助。 – Manwal

如果你可以給'寬度'你有風格。檢查它https://jsfiddle.net/3h937r1q/24/ – Manwal

我認爲你正在尋找這個。由於您在和標記內使用引導程序網格，因此必須使用引導程序偏移量類別將元素居中。

<div class="col-xs-12 col-md-12 home-buttons"> 
    <a href="#" class="col-xs-6 col-sm-4 col-md-2 col-md-offset-4 col-sm-offset-2 HomepageBtn Animate"> 
     <div class="tile-text"> 
     AP REVIEW 
     </div> 
    </a> 
    <a href="#" class="col-xs-6 col-sm-4 col-md-2 HomepageBtn Animate"> 
     <div class="tile-text"> 
     VAT CHECKER 
     </div> 
    </a> 
</div>

來源

2016-07-01 10:18:18 WebDevRon

https://jsfiddle.net/25Lno6n7/

.home-buttons { 
    width:600px; 
    display:flex; 
    flex-direction:column; 
    align-items:center; 
    } 

    .home-buttons .HomepageBtn { 
    flex:0 0 300px; 
    }

來源

2016-07-01 10:23:41

如何水平居中錨鏈接中的div？

回答

相關問題