display CENTERED row of images

[ppetree]

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!