DIV在中心div旁边 [英] DIV next to centered 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-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

I want to have a div next to the centered div (see the image above) but what i get instead is this. http://i.imgur.com/X0e4s.png

我如何解决这个问题？

问候

推荐答案

我想有很多方法可以采取。这是一个。

I imagine there are quite a few approaches you can take. Here is one.

使用与您的示例相同的HTML结构，可以实现以下目标：

Using the same HTML structure as in your example, the goal can be achieved thus:

• 设置除主包装外的所有元素 inline-block 。


• c。将 text-align：center 添加到主包装中。


• 将侧边栏放在文档流中， c> position：absolute 。这要求你给它的容器 position：relative 以及。


• 给边栏的容器零宽度和高度， t影响定心计算。给它 vertical-align：top ，使其顶部边缘（也是侧边栏的顶部边缘）与居中元素的顶部边缘对齐。


• 可以为中心元素和侧边栏指定 text-align （如果您不希望自己的内容居中）。

• Make all elements except the main wrapper inline-block.
• Center the "centered" element by giving text-align: center to the main wrapper.
• Put the sidebar out of the document flow by giving it position: absolute. This requires that you give its container position: relative as well.
• Give the sidebar's container zero width and height so that it doesn't affect the centering calculations. Give it vertical-align: top so that its top edge (which is also the sidebar's top edge) aligns with the top edge of the centered element.
• Optionally specify text-align for the centered element and the sidebar if you don't want their contents to be centered within themselves.

作为一个奖励，使用这种方法，您可以直接在一个地方直接指定中心的div和侧边栏的宽度。

As a bonus, with this approach you can directly specify the widths for both the centered div and the sidebar in just one place.

查看操作 。

这篇关于DIV在中心div旁边的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！