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;}

如果您只有一行文字，则可以使用line-height;（如果div为50pc，则行高为50px）。

如果您有多个元素，也可以使用填充，如您所述。但由于您具有响应式设计，因此您需要根据分辨率指定不同的填充。这样做的方法是使用@media queries。

Answer 3

除了其他评论之外，我建议您考虑简化基本页面布局并首先进行验证。我可以看到网格布局的一些基本问题，也需要注意。

例如，某些CSS样式发生了奇怪的事情，导致span6的宽度被覆盖，因此Bootstrap设置不会发生。

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

此外，您的产品/解决方案/服务总共有3 x span6，这对两者都没有帮助。

祝你好运！

Answer 4

我想了解，但答案是

保证金：0自动;

0表示顶部和底部没有填充，自动左右居中。您只能将其应用于具有宽度的div。例如

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

    </div>
</div>

你的css看起来像

#container{
width:100%;
}

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

将中间的toCenter div对齐。希望有道理。第一次在这里发帖！哈哈

使div居中对齐

4 个答案: