使用CSS在div内部居中多个元素

Question

我是一个有用的助手，可以进行文本翻译。

我是HTML和CSS的新手，正在尝试创建一个网站，这是部分代码：

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:

.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;
}

http://jsfiddle.net/ubd9W/

我试图将红色圆形（水平和垂直）置于黑色框内的中心位置，但似乎无法实现。我尝试使用“text-align”并将左右边距设置为自动，但不起作用。我也不能使用“absolute”定位，因为页面顶部有一个固定的菜单栏，如果滚动会被破坏。任何帮助将不胜感激。谢谢。

- sooty1892

---

为什么不使用一个70x70的图像来代替使用CSS制作圆形？ - stackErr

@stackErr 为什么要使用图片，如果你可以使用 CSS 呢？ - Danield

Answer 1

只需使用你提供的相同代码，你就可以很容易理解，只需给父元素添加 text-align:center; 和 position:relative;

    .row{
        border:4px solid black;
        height: 100px;
        width: 700px;
        margin: 10px;
        text-align:center;
        position:relative;
    }

然后设置子元素的 margin:10px auto; 和 display:inline-block;

    .circle{
        border:4px solid red;
        height: 70px;
        width: 70px;
        border-radius: 40px;
       position:relative;
        margin:10px auto;
       display:inline-block;
    }

或者，如果您希望它们之间有更多的边距，请将 margin:10px auto; 更改为 margin: 10px 40px; 演示： http://jsfiddle.net/ubd9W/14/

- Gildas.Tambo

Answer 2

我认为你不能仅使用CSS来实现这个，而不是硬编码数值。

你可以使用flexbox http://coding.smashingmagazine.com/2013/05/22/centering-elements-with-flexbox/（浏览器支持不太好）或JavaScript解决方案。

编辑：

我正在使用jQuery。

对于三个圆：

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");

对于动态数量的圆：

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")
})

我们遍历所有行，看看它们里面有多少圆，并将它们的数量乘以一个圆的宽度，以便我们可以减去左/右填充。

- Arthur Kovacs

---

谢谢，你有任何想法如何在JavaScript中完成这个吗？ - sooty1892

Answer 3

使用flexbox是目前最好的选择，但ie<10不支持http://caniuse.com/#feat=flexbox

如果你需要在不支持flexbox的浏览器上工作，水平对齐很容易，只需在.circle上添加display: inline属性，在.row上添加text-align: center属性即可。

http://jsfiddle.net/BTh2t/2/

.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;

}

对于垂直对齐，我可以使用圆的高度百分比来使其工作，并更改box-sizing属性以及上下边距，因此分配的百分比是有意义的，并将位置相对于圆类别进行分配，以便它可以使用剩余百分比的一半作为顶部属性，例如： 圆高度=70％， 圆顶部=15％

http://jsfiddle.net/BTh2t/3/

.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;

}

请记住，使用此方法增加 .row 类的高度时，圆形的高度也会自动增加。

希望对您有所帮助！

- jfplataroti

Answer 4

另一个使用display:table属性的简单解决方案：

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：

.wrapper {
    display: table;
    margin: auto;
}

链接到Fiddle

- Will

Answer 5

水平居中：使用 text-align: center; + display:inline-block;

垂直居中：使用 line-height + vertical-align: middle;

FIDDLE

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 */
}

- Danield