使集中对齐

-1

我使用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>

来源

2013-03-05 user2044139

在一般情况下，如果你需要到中心一个div没有排队超过一上来就同一“行”，你需要使用CSS ...

margin:auto

将其置于您拥有的空间中。它需要一个宽度放在你想要居中的div上。

来源

2013-03-05 00:12:56 niaccurshi

你有一些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。

来源

2013-03-05 00:18:17 Yisela

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

例如，某些CSS样式会导致span6的宽度被覆盖，所以Bootstrap设置不会发生。

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

此外，您的产品/解决方案/服务总共有3个span6的，这也没有帮助。

祝你好运！

来源

2013-03-05 00:51:36

我想了解，但答案是

margin：0 auto;

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

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

    </div> 
</div>

你的CSS看起来像

#container{ 
width:100%; 
} 

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

将对准中间的DIV到中心。希望这是有道理的。第一次发布在这里！哈哈

来源

2013-03-05 01:49:49

回答

相关问题