使用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 40px;

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

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

我們遍歷所有行並查看它們中有多少個圓圈，並將它們的數字乘以圓的寬度，這樣我們就可以減去左/右邊距。

Answer 3

使用flexbox它是迄今為止最好的選擇，但它現在支持ie <10 http://caniuse.com/#feat=flexbox

如果你需要它在不支持flexbox的瀏覽器上工作，水平對齊很容易，你可以添加一個屬性display：inline on .circle和text-align：center on .row。

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屬性以及頂部和底部邊距，因此分配的百分比有意義並且相對於圓類指定位置，因此我們可以使用剩余百分比的一半來使用top屬性：circle height = 70％，circle top = 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類的高度，圓的高度將自動增加。

我希望它有所幫助！

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

鏈接到小提琴

Answer 5

對於水平對齊 ：使用text-align: center; + display:inline-block;

對於垂直對齊：使用line-height + vertical-align: middle;

小提琴

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