display CENTERED rząd obrazów

Question

Mam rząd trzech obrazów, które aktualnie wyświetlają się dobrze.

Teraz chcę wyświetlić jeszcze dwa obrazy poniżej tych trzech i chcę je wyśrodkować (wyglądałoby to trochę jak piramida do góry nogami).

Bez względu na to, co robię, dolny rząd pozostaje wyrównany do lewej.

Oto .css

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

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

Tutaj były można zobaczyć oryginalne trzy: http://www.neighborhoodwatchalerts.com/

Ponieważ nie chcę stronę testową, aby pokazać się w wyszukiwarkach możesz wziąć powyższy URL i dodać do niego index2.php i zobaczyć wszystkie 5 zdjęć.

Wszelkie sugestie będą mile widziane!

Answer 1

Jeśli ustawisz kategorię divs na właściwość css o numerze display:inline-block, będą one zgodne z zasadą kontenera text-align: center.
here's a fiddle

przykład 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

Jednym z szybkich sposobów na to jest zawinięcie dwóch ostatnich div s w innym div i wyśrodkowanie tego przy użyciu margin: 0 auto;.

Więc coś

<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 na ... 0 w margin może przynieść dwa rzędy zbyt blisko. Być może będziesz musiał dostosować.