显示CENTERED行图像

Question

我有一排三个图像,目前显示正常.

现在,我想在这三个下面再显示两个图像,我希望它们居中(它看起来像一个倒置的金字塔).

无论我做什么,底行保持左对齐.

这是.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>

这是你可以看到原来的三个:http://www.neighborhoodwatchalerts.com/

因为我不希望测试页面显示在搜索引擎中,所以您可以使用上面的URL并将index2.php添加到其中并查看所有5个图像.

任何建议,将不胜感激!

Answer 1

如果将类别div设置为具有css属性display:inline-block,则它们将遵循text-align: center容器的规则.
这是一个小提琴

标记示例

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