display CENTERED row of images

问题:

I have a row of three images that are currently displaying just fine.

Now, I want to display two more images right below those three and I want them centered (it would kinda look like an upside down pyramid).

No matter what I do, the bottom row stays left aligned.

Here's the .css

.category
{
 width:176px; 
 font-size:80%; 
 text-align:center;
 float:left;
 position:relative;
}

Here's the html:

 <div style='width:95%; align:center'>
 <div class='category'><a href='individual.php'><img src='images/individual.jpg' style="padding-bottom:0.0em;" border='0' alt='Individual Electronic Neighborhood Watch Alerts by Email and Text Messaging'></a>
 <b>Individuals</b></div>        
 <div class='category'><a href='community.php'><img src='images/community.jpg' style="padding-bottom:0.0em;" border='0' alt='Community based Electronic Neighborhood Watch Alerts by Email and Text Messaging'></a>
 <b>Communities</b></div>        
 <div class='category'><a href='/police'><img src='images/first_respond.jpg' style="padding-bottom:0.0em;" border='0' alt='Police and send Electronic Neighborhood Watch Alerts by Email and Text Messaging'></a>
 <b>Fire/Police</b></div>
 <br>
 <div class='category'><a href='business.php'><img src='images/business.jpg' border='0' alt='Electronic Crime Watch Alerts by Email and Text Messaging for Businesses'></a>
 <b>Businesses</b></div>        
 <div class='category'><a href='utility.php'><img src='images/utility.jpg' border='0' alt='Phone, Cable, Water, Gas and Power Outage Alerts'></a>
 <b>Utilities</b></div>
 </div>

Here's were you can see the original three: http://www.neighborhoodwatchalerts.com/

Because I dont want the test page to show up in the search engines you can take the above URL and add index2.php onto it and see all 5 images.

Any suggestions would be appreciated!

回答1:

If you set your category divs to have a css property of display:inline-block, they will obey the text-align: center rule of the container.
here's a fiddle

Markup example

<div class="container">
    <div class="category"></div>
    <div class="category"></div>
    <div class="category"></div>
    <br/>
    <div class="category"></div>
    <div class="category"></div>
</div>

Css

.container{
    border: 1px solid #ccc;
    text-align: center;
}
.category{
    display: inline-block;
    width: 100px;
    height: 100px;
    background: #ccc;
    margin: 5px;
}

回答2:

One quick way to do it is wrap the bottom two divs in another div and center that using margin: 0 auto;.

So something like

<div id="somethingWrapper">

      <div class='category'><a href='business.php'>
      <img src='images/business.jpg' border='0' alt='yada'></a>
      <b>Businesses</b></div>        

      <div class='category'><a href='utility.php'>
      <img src='images/utility.jpg' border='0' alt='yadayada'></a>
      <b>Utilities</b></div>

</div>

css

#somethingWrapper{
    width:352px; //or something close
    margin:0 auto; 
}

Fyi... the 0 in the margin might bring the two rows too close. You may need to adjust.