1

I have a containing div with a max-width set. This div has left and right margins set to auto, so it centers when the user's screen is larger than the max-width. It contains several other divs inside it that float to the left so that they all line up nicely. I set it up this way so that if the user's screen is smaller than the max-width it will push some of the divs to the next line.

This all works great, except that I'd like to be able to center each line. Right now, when some of the divs are pushed to the next line, they all float to the left.

The 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>

and the 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;
}
4

1 回答 1

0

你可以试试这个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;
}
于 2013-02-11T14:55:23.887 回答