Html 使用 css 将 div 中的多个元素居中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18451677/
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
Centre multiple elements within div using css
提问by sooty1892
I'm new to html and css and I'm trying to create a website, part of the code is here:
我是 html 和 css 的新手，我正在尝试创建一个网站，部分代码在这里：
HTML:
HTML：
<div class="row">
<div class="circle"></div>
</div>
<div class="row">
<div class="circle"></div>
<div class="circle"></div>
</div>
<div class="row">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
<div class="row">
<div class="circle"></div>
<div class="circle"></div>
</div>
<div class="row">
<div class="circle"></div>
</div>
CSS:
CSS：
.circle
{
border-style: solid;
border-color: red;
width: 70px;
border-radius: 40px;
float:left;
margin: 2px;
}
.row
{
border-style: solid;
border-color: black;
height: 100px;
width: 700px;
margin: 10px;
}
I'm trying to centre red circles (horizontally and vertically) within the black boxes but I can't seem to manage it. I've tried using 'text-align' and setting the left and right margin to auto but that doesn't work. I also can't use 'absolute' positioning because I have a fixed menu bar at the top of the page and that gets ruined if you scroll.
我试图将红色圆圈（水平和垂直）置于黑框内，但我似乎无法管理它。我试过使用“文本对齐”并将左右边距设置为自动，但这不起作用。我也不能使用“绝对”定位，因为我在页面顶部有一个固定的菜单栏，如果你滚动它就会被破坏。
Any help will be greatly appreciated. Thanks
任何帮助将不胜感激。谢谢
回答by Gildas.Tambo
very simple to understand with the same code you provide you just need to give the parent element a text-align:center;and a position:relative;
使用您提供的相同代码非常容易理解，您只需要给父元素一个 text-align:center; 和一个 位置：相对；
.row{
border:4px solid black;
height: 100px;
width: 700px;
margin: 10px;
text-align:center;
position:relative;
}
then set the children margin:10px auto;and display:inline-block;
然后设置子边距：10px auto; 并显示：内联块；
.circle{
border:4px solid red;
height: 70px;
width: 70px;
border-radius: 40px;
position:relative;
margin:10px auto;
display:inline-block;
}
or if you want more margin between them change margin:10px auto;to margin: 10px 40px;
或者如果你想要更多的边距，请更改margin:10px auto; 到余量：10px的40像素;
回答by Arthur Kovacs
I don't think you can achieve this only with CSS, without hardcoding values.
我认为你不能只用 CSS 来实现这一点，而没有硬编码值。
You can use flexbox http://coding.smashingmagazine.com/2013/05/22/centering-elements-with-flexbox/(not so good browser support) or a JavaScript solution.
您可以使用 flexbox http://coding.smashingmagazine.com/2013/05/22/centering-elements-with-flexbox/（浏览器支持不太好）或 JavaScript 解决方案。
EDIT:
编辑：
I'm using jQuery.
我正在使用 jQuery。
for three circles:
对于三个圆圈：
var rowWidth = jQuery('.row').width();
var circleWidth = jQuery('.circle').width();
var equalSpace = rowWidth - (3*circleWidth);
jQ('.row').css("padding-left", equalSpace + "px").css("padding-right", equalSpace + "px");
for a dynamic number of circles:
对于动态数量的圆：
var rowWidth = jQuery('.row').width();
var circleWidth = jQuery('.circle').width();
jQuery('.row').each(function(){
var circNumber = jQuery(this).children('.row').length; //this will give you the number of circles inside the current row.
var thisWidth = rowWidth - (circNumber * circleWidth);
jQ(this).css('padding-left', thisWidth + "px").css('padding-right', thisWidth + "px")
})
We iterate through all the row and see how many circles we have in them and multiply theyr number to a circle's width so we can substract the left/right padding.
我们遍历所有行，查看其中有多少个圆，并将它们的数字乘以圆的宽度，这样我们就可以减去左/右填充。
回答by jfplataroti
using flexbox it's by far the best option, but it's now supported by ie<10 http://caniuse.com/#feat=flexbox
使用 flexbox 是迄今为止最好的选择，但它现在被 ie<10 http://caniuse.com/#feat=flexbox支持
If you need it to work on browsers that doesn't support flexbox, the horizontal alignment is easy, you can do it adding a the attributes display: inline on .circle and text-align: center on .row.
如果你需要它在不支持 flexbox 的浏览器上工作，水平对齐很容易，你可以添加属性 display: inline on .circle 和 text-align: center on .row 。
.circle
{
border-style: solid;
border-color: red;
height: 70px;
width: 70px;
border-radius: 40px;
display: inline-block;
margin: 2px;
}
.row
{
border-style: solid;
border-color: black;
height: 100px;
width: 700px;
margin: 10px;
text-align: center;
}
For the vertical alignment i could make it work using percentages for the height of the circle and i change the box-sizing property and the top and bottom margin, so the percentage assigned make sense and assign position relative to the circle class so we it can use the top property using the half of the remaining percentage ex: circle height = 70%, circle top = 15%
对于垂直对齐，我可以使用圆圈高度的百分比来使其工作，并且我更改了 box-sizing 属性以及顶部和底部边距，因此分配的百分比有意义并分配相对于圆圈类的位置，因此我们可以使用剩余百分比的一半使用 top 属性，例如：圆高度 = 70%，圆顶 = 15%
.circle
{
border-style: solid;
border-color: red;
height: 70%;
width: 70px;
border-radius: 40px;
display: inline-block;
margin-left: 2px;
margin-right: 2px;
position: relative;
top: 15%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.row
{
border-style: solid;
border-color: black;
height: 100px;
width: 700px;
margin: 10px;
text-align: center;
}
keep in mind that with this approach if you increase the height of the .row class the height of the circle will increase automatically.
请记住，使用这种方法，如果增加 .row 类的高度，圆圈的高度将自动增加。
I hope it helps!
我希望它有帮助！
回答by Will
Another simple solution with the display:table property as well:
另一个带有 display:table 属性的简单解决方案：
HTML
HTML
<div class="row">
<div class="wrapper">
<div class="circle"></div>
</div>
</div>
<div class="row">
<div class="wrapper">
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
<div class="row">
<div class="wrapper">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
<div class="row">
<div class="wrapper">
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
<div class="row">
<div class="wrapper">
<div class="circle"></div>
</div>
</div>
CSS to add:
要添加的 CSS：
.wrapper {
display: table;
margin: auto;
}
回答by Danield
For horizontal aligning: use text-align: center;+ display:inline-block;
对于水平对齐：使用text-align: center;+display:inline-block;
For vertical aligning:use line-height+ vertical-align: middle;
对于垂直对齐：使用line-height+vertical-align: middle;
CSS
CSS
.circle
{
border-style: solid;
border-color: red;
height: 70px;
width: 70px;
border-radius: 40px;
margin: 2px;
display:inline-block; /* for horizontal alignment */
vertical-align: middle; /* for vertical alignment */
}
.row
{
border-style: solid;
border-color: black;
height: 100px;
line-height: 100px; /* for vertical alignment */
width: 700px;
margin: 10px;
text-align: center; /* for horizontal alignment */
}
