body { background: rgba(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.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; }@H_403_4@//
<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>@H_403_4@我想在居中的div旁边有一个div(见上图),但我得到的却是这个. http://i.imgur.com/X0e4s.png @H_403_4@我该如何解决这个问题? @H_403_4@问候
解决方法
我想你可以采取很多方法.这是一个.
@H_403_4@使用与示例中相同的HTML结构,可以实现目标:
@H_403_4@>创建除主包装内联块之外的所有元素.
>通过将text-align:center赋予主包装器来居中“居中”元素.
>将侧边栏放在文档流程之外,给它位置:绝对.这要求您给出其容器位置:相对位置.
>给侧边栏的容器零宽度和高度,使其不影响居中计算.给它vertical-align:top,使其顶边(也就是侧边栏的顶边)与居中元素的顶边对齐.
>如果您不希望其内容在其自身中居中,则可以为居中元素和侧边栏指定text-align. @H_403_4@作为奖励,使用此方法,您可以在一个位置直接指定居中div和侧边栏的宽度. @H_403_4@See it in action.
>通过将text-align:center赋予主包装器来居中“居中”元素.
>将侧边栏放在文档流程之外,给它位置:绝对.这要求您给出其容器位置:相对位置.
>给侧边栏的容器零宽度和高度,使其不影响居中计算.给它vertical-align:top,使其顶边(也就是侧边栏的顶边)与居中元素的顶边对齐.
>如果您不希望其内容在其自身中居中,则可以为居中元素和侧边栏指定text-align. @H_403_4@作为奖励,使用此方法,您可以在一个位置直接指定居中div和侧边栏的宽度. @H_403_4@See it in action.