Question

我有3个具有未知（可变）宽度的div。我希望它们能够定位在左侧，中间位置和右侧。我左右做了，但中心有问题。

示例（我想要的）：

[[LEFT]                            [CENTERED]                              [RIGHT]]

但他们是：

[[LEFT][CENTERED]                                                           [RIGHT]]

CSS：

#text_area_wrapper
    {
        text-align:center;
        margin:0 auto;
        display:inline-block;
    }
    #text_area
    {
        width:200px;
        text-align:center;
        margin:0 auto;
    }
    #text_area_left
    {
        float:left;
        position:relative;
        display:inline-block;
        opacity:0.5;
        filter: alpha(opacity=50);
    }
    #text_area_right
    {
        position:relative;
        float:right;
        display:inline-block;
        opacity:0.5;
        filter: alpha(opacity=50);
    }

HTML：

<div id='text_area_row'>
                <div id='text_area_left'>Left</div>
                <div id='text_area_wrapper'>
                    <div id='text_area'>
                        CENTERED
                    </div>
                </div>
                <div id='text_area_right'>Right</div>
    </div>

有什么问题？

Answer 1

您可以将中间<div>置于浮动的overflow:hidden之后，然后设置属性#text_area_left { float:left; opacity:0.5; filter: alpha(opacity=50); } #text_area_wrapper { overflow:hidden; text-align:center; } #text_area_right { float:right; opacity:0.5; filter: alpha(opacity=50); }。隐藏了水平溢出的块元素将清除任何先前浮动的元素并填充剩余空间：

<强> CSS

<div id='text_area_row'>
    <div id='text_area_left'>Left</div>
    <div id='text_area_right'>Right</div>
    <div id='text_area_wrapper'>
        <div id='text_area'>CENTERED</div>
    </div>
</div>

<强> HTML

{{1}}

JSFiddle

Answer 2

您应该将所有元素浮动到左侧，并根据页面元素的宽度和页面本身的宽度正确设置边距。

没有漂浮中心。

编辑：但是，您可以将居中元素的边距设置为margin：0 auto;这将允许它以页面为中心。

Answer 3

好吧，左右两侧已经处于正确的位置。因此，为了使剩余部分居中，请使用标签。请注意，它有点麻烦，但通常工作正常。所以 <center> <div id='text_area_wrapper'> <div id='text_area'> Centered </div> </div>

HTML 3 divs-左，中，右定位

3 个答案: