Question

如何在不知道第一个元素宽度的情况下将第二个元素置于div中心。

我希望“foo”向左浮动，“bar”以原始div为中心。如果我知道“foo”的宽度，我可以这样做：

<div>
    <span style="float:left;">foo</span>
    <span style="margin-left:-10px;">bar</span>
</div>

有没有其他方法可以做到这一点，没有margin-left设置为静态宽度？

Answer 1

Center of the parent div?

<div>
    <span id="f"> foo  foo  foo  foo  foo  foo  foo  foo </span>
    <span id="c">bar</span>
</div>

CSS：

#f{
    float:left;
}
#c{
    display:block;
    margin: 0 auto;
    width:100px;
}

Answer 2

我有点困惑为什么你想要这个，但在这里：http://jsfiddle.net/Wexcode/jL87v/

<div>
    <span class="foo">foo</span>
    <span class="bar">bar</span>
</div>

CSS：

.foo { float: left; }
.bar {
    text-align: center;
    margin: 0 auto;
    display: block; }

Answer 3

您可以这样写：

<强> CSS

.parent{
    text-align:center;
}
.child1,.child2{
    text-align:left;
}
.child1{
    float:left;
}
.child2{
    vertical-align:top;
    display:inline-block;
    *display:inline;/* For IE7 */
    *zoom:1;/* For IE7 */
    border:1px solid red;
}

<强> HTML

<div class="parent">
    <span class="child1">foo</span>
    <span class="child2">bar</span>
</div>

选中此http://jsfiddle.net/6fMve/1/

Answer 4

尝试将第二个元素的margin-left设置为50％。

这是一个例子： http://jsfiddle.net/6fMve/

左侧浮动与中心元素结合

4 个答案: