自舉網格佈局。空div

我有一個關於Bootstrap網格佈局和空div的問題。自舉網格佈局。空div

我有文本和一個按鈕，我希望文本和按鈕顯示在頁面的中間（水平）。我用空div來達到這個目的。

有沒有更好的方法來做到這一點。我不希望我的文本對齊，因爲文本將分爲兩行。

這樣做的最好方法是什麼？人們只是使用空div的？

在此先感謝

<div class="row"> 
     <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12"></div> 
     <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12"> 
      <span> 
       This is a new feature 
       </br> for the site. 
      </span> 
     </div> 
     <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> 
       <a class="btn btn-default size" href="">Click button</a> 
     </div> 
     <div class="col-lg-2 col-md-2 col-sm-12 col-xs-12"></div> 
    </div>

來源

2016-03-01 Kong

如果您不使用文本對齊中心。你可以使用引導類col-md-offset-3

來源

2016-03-01 18:36:22

聯合文本中心，我相信這是正確的答案。在http://getbootstrap.com/css/#grid-offsetting中瞭解更多信息 – teefars

我使用了col-md-offset，它效果很好。謝謝 – Kong

使用text-center類包含文本和按鈕的股利。

更新： 我已經做了一個快速搜索，並找到相關的職位。我建議在提問前進行搜索，因爲您的問題可能會被拒絕投票和/或擱置。

來源

2016-03-01 18:29:24 Kody

如果要居中的行中的所有內容，只是簡單地添加text-center你行，給你的div的內部class="col-xs-12"。

<div class="row text-center"> 
    <div class="col-xs-12"> 
    <span> 
     This is a new feature for the site. 
    </span> 
    </div> 
    <div class="col-xs-12"> 
    <a class="btn btn-default size" href="">Click button</a> 
    </div> 
</div>

JSFiddle

來源

2016-03-01 18:36:04 Tricky12

怎麼樣這樣簡單 - https://jsfiddle.net/8cuyc32z/1/？

HTML

<div class="text-center"> 
    <div class="tc-text"> 
    This is a new feature <br />for the site. 
    </div> 
    <div class="tc-btn"> 
    <a class="btn btn-default size" href="">Click button</a> 
    </div> 
</div>

CSS

.tc-text, .tc-btn { 
    display:inline-block; 
    vertical-align:middle; 
    margin:0 10px; 
}

希望幫助！

來源

2016-03-01 18:39:32

Tricky12描述的方式是將列中的所有內容居中放在你想要做的是什麼？如果這樣的話是正確的。

來源

2016-03-01 18:59:57

自舉網格佈局。空div

回答

相關問題