Hiển thị hàng TRUNG TÂM hình ảnh

Question

Tôi có một hàng ba hình ảnh hiện đang hiển thị tốt.

Bây giờ, tôi muốn hiển thị thêm hai hình ảnh ngay bên dưới ba hình ảnh đó và tôi muốn chúng ở giữa (trông giống như một kim tự tháp lộn ngược).

Bất kể tôi làm gì, hàng dưới cùng vẫn được căn trái.

Đây là .css

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

Dưới đây là 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> 

Dưới đây là nơi bạn có thể xem bản gốc ba: http://www.neighborhoodwatchalerts.com/

Bởi vì tôi không muốn trang thử nghiệm xuất hiện trong các công cụ tìm kiếm, bạn có thể lấy URL trên và thêm index2.php vào nó và xem tất cả 5 hình ảnh.

Mọi đề xuất sẽ được đánh giá cao!

Answer 1

Nếu bạn đặt div danh mục của mình có thuộc tính css là display:inline-block, chúng sẽ tuân theo quy tắc text-align: center của vùng chứa.
here's a fiddle

Markup dụ

<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

Một cách nhanh chóng để thực hiện việc này là bọc hai phần dưới cùng div s vào một số div khác và căn giữa sử dụng margin: 0 auto;.

Vì vậy, một cái gì đó giống như

<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 ... các 0 trong margin có thể mang lại hai hàng quá gần. Bạn có thể cần phải điều chỉnh.