bootstrap在CELL中的中心div

我正在使用Bootstrap 3，我想將div放在容器行的單元格中。當我看着時，我只發現了有關將容器中的div集中到非我需要的主題。我想知道如何將div（垂直和水平）居中放置在特定的單元格中。原因是在同一排我有其他更大的高度的div，並在行的末尾，我想把一個比其他divs相對較小的按鈕，因此我想集中它使它看起來很漂亮。bootstrap在CELL中的中心div

我已經試過什麼到現在是進入bootstrap.min.css文件，並進行以下更改：

.table>thead>tr>th, 
.table>tbody>tr>th, 
.table>tfoot>tr>th, 
.table>thead>tr>td, 
.table>tbody>tr>td, 
.table>tfoot>tr>td{ 
padding:8px; 
line-height:1.42857143; 
vertical-align:top; 
border-top:1px solid #ddd}

到：

.table>thead>tr>th, 
.table>tbody>tr>th, 
.table>tfoot>tr>th, 
.table>thead>tr>td, 
.table>tbody>tr>td, 
.table>tfoot>tr>td{ 
padding:8px; 
line-height:1.42857143; 
vertical-align:middle; 
border-top:1px solid #ddd}

似乎這不改變任何事情，所以我猜我不在正確的軌道上。

來源

2014-06-27 user3281466

對於垂直和水平居中，該解決方案爲我工作：http://jsfiddle.net/hg8Sn/

這樣做的唯一的缺點是，當我使用的引導，當窗口變小按鈕將對齊的左DIV。我通過使按鈕，最多的div的整個寬度，所以我設置COL-XS和Col-MD到12個固定的：

<div id="addchart" class="col-md-6 col-lg-6 col-xs-12 col-sm-12 text-center"> 
    <button id="add-chart-btn" class="btn btn-lg btn-default">Add Chart</button> 
</div>

對於我來說，這只是中心按鈕，它並不能誇大到容器的寬度。這可能是因爲我使用了特定的引導主題，但如果有人想要解決這個問題，那麼他們可以爲按鈕設置固定的寬度。

來源

2014-06-30 09:25:00 user3281466

但我昨天向你建議了同樣的事情，除了它是一個屬性而不是CSS屬性。它雖然並沒有爲我工作。我會嘗試你的解決方案。謝謝！ – Aayush

說實話，即使我的解決方案不是很好，因爲行高仍然需要一些固定的價值。我將嘗試查看是否可以更改bootstrap.min.css文件以便將單元中的元素居中。 – user3281466

只需編輯bootstrap.css並使用less來使其像bootstrap.min.css一樣。壓縮後很難編輯bootstrap.min.css。 – Aayush

對於中心-ING水平一個div，你可以把CSS文件：

margin-left: auto; margin-right:auto;

對於垂直對齊方式：

margin-top: auto; margin-bottom: auto;

發佈你的HTML代碼將是有益的BTW。

來源

2014-06-27 14:59:36 Aayush

我把什麼放在我的CSS中：＃add-chart {} {margin} left：auto; margin-right：auto; margin-top：auto; margin-bottom：auto; } 包含按鈕的DIV：

如果這是你的建議是什麼，它並沒有改變我什麼。 – user3281466

您是否試圖將該按鈕放在單元格的中央？ – Aayush

對於水平居中放置在特定單元格中的內容，您只需添加對齊類似於對於垂直，（此爲Bootstrap專用） – Aayush

-1

檢查並看到您正在使用bootstrap.min.css而不是bootstrap.css。也許你可能會鏈接錯誤的CSS文件。

來源

2014-06-28 12:53:20 Jason

這有什麼不同？ bootstrap.min.css與bootstrap.css相同，只不過它通過刪除所有空格並縮小文件大小來進行壓縮。 – Aayush

，因爲他可能只引用了bootstrap.css，但是編輯了bootstrap.min.css，從而解釋了他所做的所有編輯，但沒有顯示任何結果。 – Jason

bootstrap在CELL中的中心div

回答

相關問題