居中多个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的第二排，但没有任何工作。

任何帮助，非常感谢！

你是在找这样的东西：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％，由于填充，边距等等）

完美！谢谢！ – 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; 
}

居中多个div在父div里面

相关推荐