我有一排三个图像,目前显示正常.
现在,我想在这三个下面再显示两个图像,我希望它们居中(它看起来像一个倒置的金字塔).
无论我做什么,底行保持左对齐.
这是.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个图像.
任何建议,将不胜感激！
解决方法
如果将类别div设置为具有display：inline-block的css属性,则它们将遵循容器的text-align：center规则.
here’s a fiddle
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;
}
