Question

我对这段时间感到很沮丧，在尝试实现我在几十篇文章中读到的内容后，我仍然没有任何运气，最后一部分。

我所拥有的是一个包含两行额外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，但这也不起作用。

非常感谢任何帮助！

Answer 1

<强> jsfiddle example

您想要从子容器div（float:left）中删除div.sub-container并给它们一个宽度（由于填充，边距等等，大约为23％）

Answer 2

如果要将元素/子div放在其中，请将第二行包含在另一个容器中。

这是Demo

另外，如果你想要一个元素居中，你需要在演示中定义它的width - 我的宽度为200px。您可以根据自己的喜好进行更改。

容器的CSS：

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

在父div中居中多个div

2 个答案: