使集中對齊

Question

我使用twitter bootstrap來開發響應式設計。我有一個div，裏面有兩個div。我如何讓它集中對齊？我給填充以使它居中對齊，但是在移動佈局中，由於填充而不能集中對齊，所以我刪除了填充。

http://jsfiddle.net/NsmtF/3/embedded/result/

<div class="row features"> 
    <div class="span6">   
    <h3>Industry Operation Packages</h3> 
    <p>eCommerce, Sales and Customer Management, Purchasing and Vendor Management, Inventory Management, Build of Materials, Real-Time Production, Product Life Cycle, QA Management.</p> 
    </div> 
    <div class="span6"> 
    <h3>Customer Relationship Management</h3> 
    <p>Client Real-Time Access to Accounting, Quote Management, Order Status, Production, Inventory, Shipping and complete RMA Process - Status, Product Failure Analysis and Statistic.</p> 
    </div> 
</div> 

Answer 1

在一般情況下，如果你需要到中心一個div沒有排隊超過一上來就同一「行」，你需要使用CSS ...

margin:auto 

將其置於您擁有的空間中。它需要一個寬度放在你想要居中的div上。

Answer 2

你有一些options來做到這一點。其中之一是設置div來顯示一個類似的表，所以你可以使用表格的vertical-align屬性（這很不同的適用於其他元素）：

<div id="wrapper"> 
    <div id="cell"> 
     <div class="content"> 
      Content goes here 
     </div> 
    </div> 
</div> 

#wrapper {display:table;} 
#cell {display:table-cell; vertical-align:middle;} 

你也可以使用絕對定位的div，這頂部設置爲50％，頂部邊距設置爲內容高度的一半。這意味着對象必須有一個固定的高度，由CSS定義。這不適用於你的情況：

<div id="content"> 
    Content Here   
</div> 

#content {position:absolute; top:50%; height:240px; margin-top:-120px; /* negative half of the height */} 

方法3是在內容元素上面插入一個div。這將設置爲高度：50％;和margin-bottom：-contentheight ;.然後，內容會清除浮動，並在中間結束：

<div id="floater"> 
<div id="content"> 
    Content here 
</div> 
</div> 

#floater {float:left; height:50%; margin-bottom:-120px;} 
#content {clear:both; height:240px; position:relative;} 

如果你只有1行文字，你可以使用line-height;（如果DIV是50pc行高度將是50像素）。

如上所述，如果您有多個元素，也可以使用填充。但是因爲你有一個響應式設計，你需要根據分辨率指定不同的填充。要做到這一點的方法是使用@media queries。

Answer 3

除了其他評論，我建議你考慮簡化你的基本頁面佈局並首先驗證它。我可以看到你的網格佈局的一些基本問題，也需要注意。

例如，某些CSS樣式會導致span6的寬度被覆蓋，所以Bootstrap設置不會發生。

section.features .span6, section .features .span6 { 
width: 300px; 
text-align: center; 
} 

此外，您的產品/解決方案/服務總共有3個span6的，這也沒有幫助。

祝你好運！

Answer 4

我想了解，但答案是

margin：0 auto;

0表示頂部和底部沒有填充，自動將它左右居中。 您只能將此應用於具有寬度的div。例如

<div id="container"> 
    <div id="toCenter"> 

    </div> 
</div> 

你的CSS看起來像

#container{ 
width:100%; 
} 

#toCenter{ 
width: 500px; 
margin:0 auto; 
} 

將對準中間的DIV到中心。希望這是有道理的。第一次發佈在這裏！哈哈