Question

我有一个包含最大宽度设置的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;
}

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

当推到下一行时居中div内容

1 个答案: