DIV在居中的div旁边

Question

body {
    background: rgba(0, 0, 0, 0.8);
    font-family: sans-serif;
    font-size: 11px;
    color: #e0e0e0;
}

#wrapper {

}

#login {
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    background: rgba(0, 0, 0, 0.9);
    width: 360px;
    padding: 20px;
    position: relative;

    -webkit-border-radius: 15px;
    border-radius: 15px;
}


#registercontainer {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 1050px;
}

#register {
    position: absolute;
    left: 740px;
    top: 50px;
}

//

    <div id="wrapper">
        <div id="login">
            <h2>Login to The Something Project</h2>
            <form action="game" method="post">
                <input type="text" name="username" maxlength="20" placeholder="username"><br>
                <input type="text" name="usericon" placeholder="http://imgur.com/icon.png"><br>
                <br>
                <input type="submit" value="login">
            </form>
        </div>


        <div id="registercontainer">
            <div id="register">
                <h2>Register for The Something Project</h2>
            </div>
        </div>
    </div>

我想在居中的div旁边有一个div(见上图),但我得到的是这个.http://i.imgur.com/X0e4s.png

我该如何解决这个问题？

问候

Answer 1

我想你可以采取很多方法.这是一个.

使用与示例中相同的HTML结构,可以实现目标:

• 创建除主包装之外的所有元素inline-block.
• 通过给text-align: center主包装器居中"居中"元素.
• 通过提供侧栏将其从文档流中移出position: absolute.这要求你也给它的容器position: relative.
• 给侧边栏的容器零宽度和高度,使其不影响居中计算.给它vertical-align: top以使其顶边(也就是侧边栏的顶边)与居中元素的顶边对齐.
• text-align如果您不希望其内容在其自身中居中,则可以选择指定居中元素和侧边栏.

作为奖励,通过这种方法,您可以在一个位置直接指定居中div和侧边栏的宽度.

看到它在行动.