显示图像中心行 [英] display CENTERED row of images

问题描述

我有一排三个图像，这些图像当前显示的很好。

I have a row of three images that are currently displaying just fine.

现在，我想在这三个图像的正下方显示两个图像，并希望它们居中（有点像颠倒的金字塔）。

Now, I want to display two more images right below those three and I want them centered (it would kinda look like an upside down pyramid).

无论我做什么，最下面一行都保持对齐。

No matter what I do, the bottom row stays left aligned.

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

Here's were you can see the original three: http://www.neighborhoodwatchalerts.com/

因为我不希望测试页显示在搜索引擎，您可以使用上述URL并在其上添加index2.php并查看所有5张图像。

Because I dont want the test page to show up in the search engines you can take the above URL and add index2.php onto it and see all 5 images.

任何建议将不胜感激！

Any suggestions would be appreciated!

推荐答案

如果将类别div的css属性设置为 display：inline-block ，他们将遵守容器的 text-align：center 规则。

这是一个小提琴

If you set your category divs to have a css property of display:inline-block, they will obey the text-align: center rule of the container.
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;
}

这篇关于显示图像中心行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！