CSS 显示 CENTERED 行图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7283045/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
display CENTERED row of images
提问by ppetree
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.
无论我做什么，底行都保持左对齐。
Here's the .css
这是.css
.category
{
width:176px;
font-size:80%;
text-align:center;
float:left;
position:relative;
}
Here's the html:
这是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>
Here's were you can see the original three: http://www.neighborhoodwatchalerts.com/
您可以在这里看到原始的三个：http: //www.neighborhoodwatchalerts.com/
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.
因为我不希望测试页面显示在搜索引擎中，所以您可以使用上面的 URL 并将 index2.php 添加到它上面并查看所有 5 个图像。
Any suggestions would be appreciated!
任何建议，将不胜感激！
回答by meouw
If you set your category divs to have a css property of display:inline-block, they will obey the text-align: centerrule of the container.
here's a fiddle
如果您将类别 div 设置为具有 css 属性display:inline-block，则它们将遵守text-align: center容器的规则。
这是一把小提琴
Markup example
标记示例
<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
css
.container{
border: 1px solid #ccc;
text-align: center;
}
.category{
display: inline-block;
width: 100px;
height: 100px;
background: #ccc;
margin: 5px;
}
回答by Jason Gennaro
One quick way to do it is wrap the bottom two divs in another divand center that using margin: 0 auto;.
一种快速的方法是将底部的两个divs包裹在另一个中，div并使用margin: 0 auto;.
So something like
所以像
<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
css
#somethingWrapper{
width:352px; //or something close
margin:0 auto;
}
Fyi... the 0in the marginmight bring the two rows too close. You may need to adjust.
据透露......在0中margin可能带来的两排太近。您可能需要调整。
