Html 对齐浮动：左div居中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5523632/
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
Aligning a float:left div to center?
提问by Mike
I want to have a group of images display horizontally across the page. Each image has a few link below it so I need to put a container around each image/link-group.
我想在页面上水平显示一组图像。每个图像下面都有几个链接，所以我需要在每个图像/链接组周围放置一个容器。
The closest I have gotten to what I want is putting them in divs that float:left. The problem is I want the containers to align center not left. How can I achieve this.
我得到的最接近我想要的东西是把它们放在浮动的 div 中：左。问题是我希望容器对齐中心而不是左对齐。我怎样才能做到这一点。
回答by clairesuzy
use display:inline-block;instead of float
使用display:inline-block;代替浮动
you can't centre floats, but inline-blocks centre as if they were text, so on the outer overall container of your "row" - you would set text-align: center;then for each image/caption container (it's those which would be inline-block;) you can re-align the text to left if you require
您不能将浮动居中，但内联块居中就好像它们是文本一样，因此在“行”的外部整体容器上 - 您将为text-align: center;每个图像/标题容器（它是那些inline-block;）设置然后您可以重新- 如果需要，将文本向左对齐
回答by Jan Derk
CSS Flexbox is well supportedthese days. Go herefor a good tutorial on flexbox.
如今，CSS Flexbox 得到了很好的支持。去这里获取一个关于 flexbox 的好教程。
This works fine in all newer browsers:
这适用于所有较新的浏览器：
#container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.block {
width: 150px;
height: 150px;
background-color: #cccccc;
margin: 10px;
}<div id="container">
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
<div class="block">5</div>
</div>Some may ask why not use display: inline-block? For simple things it is fine, but if you got complex code within the blocks, the layout may not be correctly centered anymore. Flexbox is more stable than float left.
有些人可能会问为什么不使用 display: inline-block？对于简单的事情，这很好，但是如果块中有复杂的代码，则布局可能不再正确居中。Flexbox 比 float left 更稳定。
回答by goodpixels
Just wrap floated elements in a <div>and give it this CSS:
只需将浮动元素包装在 a 中<div>并为其提供以下 CSS：
.wrapper {
display: table;
margin: auto;
}
回答by Lauw
try it like this:
像这样尝试：
<div id="divContainer">
<div class="divImageHolder">
IMG HERE
</div>
<div class="divImageHolder">
IMG HERE
</div>
<div class="divImageHolder">
IMG HERE
</div>
<br class="clear" />
</div>
<style type="text/css">
#divContainer { margin: 0 auto; width: 800px; }
.divImageHolder { float:left; }
.clear { clear:both; }
</style>
回答by Shaq
Perhaps this what you're looking for - https://www.w3schools.com/css/css3_flexbox.asp
也许这就是你要找的 - https://www.w3schools.com/css/css3_flexbox.asp
CSS:
CSS：
#container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.block {
width: 150px;
height: 150px;
margin: 10px;
}
HTML:
HTML：
<div id="container">
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
</div>
回答by Teoman shipahi
.contentWrapper {
float: left;
clear: both;
margin-left: 10%;
margin-right: 10%;
}
.repeater {
height: 9em;
width: 9em;
float: left;
margin: 0.2em;
position: relative;
text-align: center;
cursor: pointer;
}
