将多个div对齐到中心，而不将每个div标签内的文本居中对齐

-1

我想将div放在主div的中间，而不使文本居中。它用于页脚站点地图。将多个div对齐到中心，而不将每个div标签内的文本居中对齐

它看起来如何。

enter image description here

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

是否有我必须添加的css规则？

来源

2014-10-06 Brian Cherdak

请添加您当前的标记并澄清您遇到问题的位置。从图像看来，你只需要为'text-align：center'容器的子元素添加'text-align：left' – Huangism 2014-10-06 19:46:18

它是OC 2.0还是还是一些1.5.x版本？ – shadyyx 2014-10-07 06:46:54

听起来像是你有这样的事情：

<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有）

来源

2014-10-06 19:48:56 idrumgood

制作的div浮动：

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

在jsfiddle完整的例子。

来源

2014-10-06 20:13:12 alquist42

我明白这个问题。你认为页脚右端有一些空间，但不幸的是没有空间。

每个带有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构建，并使用网格（列）系统进行响应。

来源

2014-10-07 07:06:59 shadyyx

我会建议一个类添加到要居中这样的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

来源

2014-10-07 19:23:35

将多个div对齐到中心，而不将每个div标签内的文本居中对齐

回答

相关问题