표시 CENTERED 행의 이미지

Question

나는 현재 잘 표시되는 세 개의 이미지가 있습니다.

이제 저는 그 세 개 바로 아래에 두 개의 이미지를 더 표시하고 싶습니다. 그리고 나는 그 이미지를 가운데에 놓기를 원합니다 (피라미드가 거꾸로 된 것처럼 보일 것입니다).

내가하는 일과 관계없이 맨 아래 행은 왼쪽 정렬로 유지됩니다. 내가 표시하기 위해 테스트 페이지를 싶지 않는 때문에 http://www.neighborhoodwatchalerts.com/

: 적부터 원래 세 가지를 볼 수 있습니다 여기에

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

것 :

다음은하는 HTML .CSS 여기

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

것입니다 검색 엔진에서 위의 URL을 가져 와서 index2.php를 추가하고 5 개의 이미지를 모두 볼 수 있습니다.

의견을 보내 주시면 감사하겠습니다.

Answer 1

카테고리 divs를 CSS 속성이 display:inline-block으로 설정하면 컨테이너의 text-align: center 규칙을 따르게됩니다. 이 제이슨에 대한
here's a fiddle

마크 업 예를

<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

빠른 방법 중 하나는 div을 다른 div에 넣고 가운데를 margin: 0 auto;으로 바꾸는 것입니다.

그래서

#somethingWrapper{ 
    width:352px; //or something close 
    margin:0 auto; 
} 

참고

<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 같은합니다 ... margin의 0 너무 가까운 두 행을 가져올 수 있습니다. 조정이 필요할 수 있습니다.