居中多個div在父div裏面

我對此有一段時間，在嘗試實現我在幾十個帖子中閱讀的內容後，我仍然沒有碰到這個最後一部分。居中多個div在父div裏面

我有一個父div，其中包含兩行額外的div。第一行是一個單獨的div，幷包含一個帶有鏈接的標籤。第二行包含多個div並排。

第一行（標籤/鏈接）居中很好。我遇到麻煩的是第二排div的集中。他們都是並排的，但是他們表現得好像我左右擺正了他們。

這裏是我的CSS：

div.parent-container { 
    position:absolute; 
    background-color:#fff; 
    top:32px; 
    left:-1px; 
    width:418px; 
    height:67px; 
    border-right:solid 1px #000; 
    border-left:solid 1px #000; 
    border-bottom:solid 1px gray; 
    padding-left:2px; 
    text-align:center; 
    float:left; 
} 

div.text-label a { 
    position:absolute; 
    background-color:#fff; 
    font-family:Microsoft Sans Serif,Arial; 
    font-weight:bold; 
    width:417px; 
    height:15px; 
    font-size:12px; 
    margin-left:auto; 
    margin-right:auto; 
} 

div.sub-container { 
    position:relative; 
    width:30px; 
    height:auto; 
    top:20px; 
    float:left; 
    padding-right:5px; 
    margin-left:auto; 
    margin-right:auto; 
} 

span.span-text { 
    position:relative; 
    font-weight:bold; 
    font-family:Microsoft Sans Serif,Arial; 
    font-size:11px; 
    width:30px; 
    height:auto; 
} 
div.img1 { 
    height:26px; 
    width:18px; 
    background:url(sprite.png) -72px -144px no-repeat; 
    margin-left:auto; 
    margin-right:auto; 
} 
div.img2 { 
    height:26px; 
    width:18px; 
    background:url(sprite.png) -95px -143px no-repeat; 
    margin-left:auto; 
    margin-right:auto; 
} 
div.img3 { 
    height:26px; 
    width:18px; 
    background:url(sprite.png) -117px -143px no-repeat; 
    margin-left:auto; 
    margin-right:auto; 
} 
div.img4 { 
    height:26px; 
    width:18px; 
    background:url(sprite.png) -141px -143px no-repeat; 
    margin-left:auto; 
    margin-right:auto; 
}

而我的HTML：

<div class="parent-container"> 
    <div class="text-label"><a href="www.website.com">link to website</a></div> 
    <div id='div1' class='sub-container'><span class='span-text'>text1</span> 
     <div class='img1'></div> 
    </div> 
    <div id='div2' class='sub-container'><span class='span-text'>text2</span> 
     <div class='img2'></div> 
    </div> 
    <div id='div3' class='sub-container'><span class='span-text'>text3</span> 
     <div class='img3'></div> 
    </div> 
    <div id='div4' class='sub-container'><span class='span-text'>text4</span> 
     <div class='img4'></div> 
    </div> 
</div>

我試圖創建一個額外的div來容納的div的第二排，但沒有任何工作。

任何幫助，非常感謝！

來源

2012-07-24 Rmilligan2372

你是在找這樣的東西：http://jsfiddle.net/j08691/j9Bn7/？ – j08691 2012-07-24 20:09:21

就是這樣！看起來我需要刪除float：left;從子容器中添加display：inline-block ;.如果您可以將其作爲答案提交，我會將其標記爲已接受。非常感謝你！！！ – Rmilligan2372 2012-07-24 20:14:51

jsfiddle example

要刪除從子容器的div的float:left（div.sub-container），並給他們一個寬度（約23％，由於填充，邊距等等）

來源

2012-07-24 20:19:49 j08691

完美！謝謝！ – Rmilligan2372 2012-07-24 20:31:50

如果要將元素/子div的中心放在其中，請將第二行包含在另一個容器中。

這裏有一個Demo

另外，如果你想中心的元素，你需要定義其width，在演示 - 我已經給的200像素的寬度。您可以根據自己的偏好進行更改。

CSS的容器：

.textContainer{ 
    margin: 0 auto; 
    width:200px; /* can be in percentage ,say 50% */ 
    position:relative; 
    overflow:hidden; 
}

來源

2012-07-24 20:18:08

居中多個div在父div裏面

回答

相關問題