1

我在这方面玩得很开心，在尝试实施我在几十篇文章中读到的内容之后，我仍然对这最后一部分没有任何运气。

我所拥有的是一个父 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，但这也不起作用。

任何帮助是极大的赞赏！

4

2 回答 2

2

jsfiddle 示例

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

于 2012-07-24T20:19:49.633 回答
1

如果您想在其中将元素/子 div 居中，则将第二行包含在另一个容器中。

这是一个演示

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

容器的 CSS：

.textContainer{
  margin: 0 auto;
  width:200px; /* can be in percentage ,say 50% */
  position:relative;
  overflow:hidden;
}
于 2012-07-24T20:18:08.150 回答