將多個div對齊到中心，而不將每個div標籤內的文本居中對齊

Question

我想將div放在主div的中間，而不使文本居中。它用於頁腳站點地圖。

它看起來如何。

我嘗試用的text-align做：中心但它集中甚至我的文字。

是否有我必須添加的css規則？

Answer 1

聽起來像是你有這樣的事情：

<footer> 
    <div> 
     <a href="#">Linky</a> 
     <a href="#">Linky</a> 
     <a href="#">Linky</a> 
    </div> 
    <div> 
     <a href="#">Linky</a> 
     <a href="#">Linky</a> 
     <a href="#">Linky</a> 
    </div> 
    <div> 
     <a href="#">Linky</a> 
     <a href="#">Linky</a> 
     <a href="#">Linky</a> 
    </div> 
    <div> 
     <a href="#">Linky</a> 
     <a href="#">Linky</a> 
     <a href="#">Linky</a> 
    </div> 
</footer> 

而你要四個div s到佔用等於空間？如果我理解正確的，只是給每個股利25％的寬度（或調整多少的div有）

Answer 2

製作的div浮動：

.footer-block { 
    width: 25%; 
    float: left; 
} 

在jsfiddle完整的例子。

Answer 3

我明白這個問題。你認爲頁腳右端有一些空間，但不幸的是沒有空間。

每個帶有h3標題的條目列表都包含在<div>中，並且這4個div中的每一個都設置了CSS width: 25%; - 這意味着4倍25％= 100％的空間=>沒有剩餘空間。如果你想要把這些div點點共同周圍創造一個空間，然後居中它們，你可以嘗試這樣的事：

<div id="footer"> 
<div id="footer-container"> 
    <?php if ($informations) { ?> 
    <div class="column"> 
    <h3><?php echo $text_information; ?></h3> 
    <ul> 
     <?php foreach ($informations as $information) { ?> 
     <li><a href="<?php echo $information['href']; ?>"><?php echo $information['title']; ?></a></li> 
     <?php } ?> 
    </ul> 
    </div> 
    <?php } ?> 
    <div class="column"> 
    <h3><?php echo $text_service; ?></h3> 
    <ul> 
     <li><a href="<?php echo $contact; ?>"><?php echo $text_contact; ?></a></li> 
     <li><a href="<?php echo $return; ?>"><?php echo $text_return; ?></a></li> 
     <li><a href="<?php echo $sitemap; ?>"><?php echo $text_sitemap; ?></a></li> 
    </ul> 
    </div> 
    <div class="column"> 
    <h3><?php echo $text_extra; ?></h3> 
    <ul> 
     <li><a href="<?php echo $manufacturer; ?>"><?php echo $text_manufacturer; ?></a></li> 
     <li><a href="<?php echo $voucher; ?>"><?php echo $text_voucher; ?></a></li> 
     <li><a href="<?php echo $affiliate; ?>"><?php echo $text_affiliate; ?></a></li> 
     <li><a href="<?php echo $special; ?>"><?php echo $text_special; ?></a></li> 
    </ul> 
    </div> 
    <div class="column"> 
    <h3><?php echo $text_account; ?></h3> 
    <ul> 
     <li><a href="<?php echo $account; ?>"><?php echo $text_account; ?></a></li> 
     <li><a href="<?php echo $order; ?>"><?php echo $text_order; ?></a></li> 
     <li><a href="<?php echo $wishlist; ?>"><?php echo $text_wishlist; ?></a></li> 
     <li><a href="<?php echo $newsletter; ?>"><?php echo $text_newsletter; ?></a></li> 
    </ul> 
    </div> 
</div> 
</div> 

我們封閉所有的4周的div到另一個的div id爲footer-container - 現在讓我們與較小的寬度（90％），還有就是#footer-container周圍的一些空間和應用價值auto爲margin-left和margin-right應居中的#footer div中

#footer-container { 
    width: 90%; 
    margin: 0 auto; 
} 

現在：定義一些CSS樣式它。隨意玩#footer-container的寬度，以取悅你的眼球。

這是jsFiddle它。

注意：這可以在1.5.X版本中正常工作，但可能無法在新的2.0版本上正常工作，因爲新的2.0版本基於Bootstrap構建，並使用網格（列）系統進行響應。

Answer 4

我會建議一個類添加到要居中這樣的div：

<div class="middle">Text that goes here</div> 
<div class="middle">Text that goes here</div> 
<div class="middle">Text that goes here</div> 
<div class="middle">Text that goes here</div> 

然後居中的div，但你寫的不是文字：

div.middle{ 
margin:auto; 
text-align:inherit !important;} 

正如你可以看到我在text-align中使用繼承，因爲我想告訴瀏覽器 「將div放在div中間但不要居中該文本的內部」 欲瞭解更多信息，請參閱： http://www.w3schools.com/cssref/css_inherit.asp