推到下一行时居中 div 内容答案

【问题标题】：Center div contents when pushed to the next line推到下一行时居中 div 内容
【发布时间】：2013-01-12 18:50:17
【问题描述】：

我有一个包含最大宽度集的 div。此 div 的左右边距设置为自动，因此当用户的屏幕大于最大宽度时它居中。它内部包含其他几个浮动到左侧的 div，因此它们都很好地排列。我是这样设置的，如果用户的屏幕小于最大宽度，它会将一些 div 推送到下一行。

这一切都很好，除了我希望能够使每条线居中。现在，当一些 div 被推到下一行时，它们都向左浮动。

html:

<div id="main_links">
  <div class="main_btn"><a href="about.html"><img src="images/about_btn.png" width="174" height="464" alt="Contact Us" /></a></div>
  <div class="main_btn"><a href="products.html"><img src="images/products_btn.png" width="174" height="464" alt="Products" /></a></div>
  <div class="main_btn"><a href="prom.html"><img src="images/prom_btn.png" width="174" height="464" alt="Prom" /></a></div>
  <div class="main_btn"><a href="weddings.html"><img src="images/weddings_btn.png" width="174" height="464" alt="Wedding Gallery" /></a></div>
  <div class="main_btn"><a href="receptions.html"><img src="images/receptions_btn.png" width="174" height="464" alt="Receptions" /></a></div>
  <div class="main_btn"><a href="flowers.html"><img src="images/flowers_btn.png" width="174" height="464" alt="Flowers" /></a></div>
</div>

和css：

.main_btn   {
float: left;
height: 536px;
width: auto;
background-image: url(../images/btn_reflection.png);
background-repeat: no-repeat;
background-position: center bottom;
margin-right: 30px;
}

#main_links {
height: auto;
max-width: 1250px;
margin-right: auto;
margin-left: auto;
position: relative;
}

【问题讨论】：

您是否尝试过 margin: 0 auto 将元素居中的技巧？
我试过了，结果还是一样。

标签： html center screen-size css

【解决方案1】：

你可以试试这个 CSS 在所有浏览器中都适用

.main_btn   {
    display:inline-block;    
    height: 536px;
    width: auto;
    background-image: url(../images/btn_reflection.png);
    background-repeat: no-repeat;
    background-position: center bottom;
    margin: 0px 10px;
}
#main_links {
    height: auto;
    text-align: center;    
    max-width: 1250px;
    margin: 0px auto;
}

【讨论】：