display fila CENTRADA de imágenes

Question

Tengo una fila de tres imágenes que se muestran actualmente muy bien.

Ahora, quiero mostrar dos imágenes más justo debajo de esas tres y quiero que estén centradas (parecería una pirámide invertida).

No importa lo que haga, la fila inferior queda alineada a la izquierda.

Aquí está el Css

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

Aquí está el 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> 

He aquí fueron puede ver el original de tres: http://www.neighborhoodwatchalerts.com/

porque no quiero la página de prueba para aparecer en los motores de búsqueda puede tomar la URL anterior y agregar index2.php en ella y ver las 5 imágenes.

¡Cualquier sugerencia sería apreciada!

Answer 1

Si establece los divisores de categoría para que tengan una propiedad css de display:inline-block, obedecerán la regla text-align: center del contenedor.
here's a fiddle

ejemplo de marcado

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

Answer 2

Una forma rápida de hacerlo es envolver los dos últimos div s en otro div y centrarlo usando margin: 0 auto;.

así que algo como

<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 ... la 0 en el margin podría traer las dos filas demasiado cerca. Es posible que deba ajustarse.