ディスプレイ中央の画像の列

Question

私は現在、うまく表示されている3つの画像の行を持っています。

今、私はそれらの3つのすぐ下の2つのイメージをさらに表示したいと思います。私はそれらを中心にしたいと思っています（ちょっとピラミッドのように見えます）。

私が何をしても、一番下の行は左揃えのままです。

ここでの.css

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

がここに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> 

のは、あなたがオリジナルの3を参照することができました。http://www.neighborhoodwatchalerts.com/

私が表示されるまでにテストページをたくないので検索エンジンで上記の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; 
} 

FYI

<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が近すぎる2つの行を持って来るかもしれません。調整が必要な場合があります。