html – 中心div旁边的DIV

概述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-to

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;}

//

<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

我该如何解决这个问题？

问候

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

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

>创建除主包装内联块之外的所有元素.
>通过将text-align：center赋予主包装器来居中“居中”元素.
>将侧边栏放在文档流程之外,给它位置：绝对.这要求您给出其容器位置：相对位置.
>给侧边栏的容器零宽度和高度,使其不影响居中计算.给它vertical-align：top,使其顶边(也就是侧边栏的顶边)与居中元素的顶边对齐.
>如果您不希望其内容在其自身中居中,则可以为居中元素和侧边栏指定text-align.

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

See it in action.

总结

以上是内存溢出为你收集整理的html – 中心div旁边的DIV全部内容，希望文章能够帮你解决html – 中心div旁边的DIV所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。