我有一排三张图像,目前显示得很好。
现在,我想在这三个图像的正下方显示另外两个图像,并且我希望它们居中(它看起来有点像一个颠倒的金字塔)。
无论我做什么,底行都保持左对齐。
这是.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/ http://www.neighborhoodwatchalerts.com/
因为我不希望测试页面显示在搜索引擎中,所以您可以获取上面的 URL 并将 index2.php 添加到其中,然后查看所有 5 个图像。
任何建议,将不胜感激!
如果您将类别 div 设置为具有 css 属性display:inline-block
,他们会遵守text-align: center
容器的规则。
这是一个小提琴 http://jsfiddle.net/KhNKL/1/
标记示例
<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;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)