使用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'并将左右边距设置为自动,但这不起作用.我也不能使用'绝对'定位,因为我在页面顶部有一个固定的菜单栏,如果你滚动就会被破坏.

任何帮助将不胜感激.谢谢

Answer 1

使用您提供的相同代码非常简单易懂,您只需要为父元素提供 text-align:center; 和 位置:相对;

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

然后设置子边距:10px auto; 并显示:inline-block;

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

或者如果你想要它们之间有更多的保证金更改保证金:10px auto; 到余量:10px的40像素;

演示:http://jsfiddle.net/ubd9W/14/