display CENTRO fila di immagini

Question

Ho una fila di tre immagini che stanno attualmente mostrando bene.

Ora, voglio mostrare altre due immagini proprio sotto quelle tre e le voglio centrate (sembrerebbe una piramide rovesciata).

Indipendentemente da ciò che faccio, la riga inferiore rimane allineata a sinistra.

Ecco il css

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

Ecco il codice 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> 

Ecco dove si può vedere l'originale tre: http://www.neighborhoodwatchalerts.com/

Perché io non voglio la pagina di prova di presentarsi nei motori di ricerca puoi prendere l'URL sopra e aggiungere index2.php su di esso e vedere tutte e 5 le immagini.

Qualsiasi suggerimento sarebbe apprezzato!

Answer 1

Se si imposta la categoria div per avere una proprietà css di display:inline-block, essi obbediranno alla regola text-align: center del contenitore.
here's a fiddle

esempio Markup

<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

Un modo rapido per farlo è avvolgere i due inferiori div s in un altro div e centrarlo utilizzando margin: 0 auto;.

Quindi qualcosa di simile

<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 ... il 0 nel margin potrebbe portare le due file troppo vicino. Potrebbe essere necessario regolare.