将绝对div与中心对齐

时间:2011-12-23 12:15:55

标签: html css

我所做的是在主margin:20%上使用div ......但我不认为这是最好的方式:

CSS:

.wrapper {
    background-color:#F0C;
    float:left;
    width:1000px;
    height:400px;

    margin-left:20%;
    alignment-adjust:central;
    position:absolute;
}

.maincontent {
    background-color:#3F6;
    float:left;
    width:50%;
    margin-left:30%;
}

.leftSidebar {
    background-color:#C63;
    float:left;
    width:30%;
    margin-left:-80%;
}

.rightsidebar {
    background-color:#66F;
    float:left;
    width:20%;
}

HTML

<div class="wrapper">
    <div class="maincontent">
        <!-- main content goes here -->
    </div>

    <div class="leftSidebar">
        <!-- left sidebar content goes here -->
    </div>

    <div class="rightsidebar">
        <!-- right sidebar content goes here -->
    </div>
</div>

如何将.wrapper定位到中心?有一个简单的方法吗?

另外,使用left / right属性和margin-left / margin-right之间的区别是什么?

2 个答案:

答案 0 :(得分:9)

.wrapper {
    width:1000px;
    position:absolute;
    left:50%;
    margin-left:-500px;
}

答案 1 :(得分:2)

我的回答是:跳过绝对定位,并使用margin:0 auto;将内容居中(顶部和底部没有边距,左右自动边距)。

.wrapper
{
    background-color:#F0C;
    width:1000px;
    height:400px;
    margin:0 auto;
}