html - 剩余行空间中的中心 div

Question

我正在尝试找出使用 CSS 使 block 2 居中于 block 1 右侧存在的剩余空间的最佳方法。此空间可能会随着浏览器窗口的大小/设备的方向而增加或减少. Block1的位置没有移动。

我希望能够结合使用 float、margin-left:auto 和 margin-right:auto 来保持 Block2 居中，但是遗憾的是我的 CSS 仍处于初级阶段。

任何指导/帮助将不胜感激。

#block1 {
    position:relative;
    top:10px;
    left:0px;
    width:50px;
    height:100px;
    background-color:#009;
}

#block2 {
    position:relative;
    width:100px;
    height:100px;
    top:10px;
    float:right;
    margin-left:auto;
    margin-right:auto;
    background-color:#999;
}

<div id="block1"></div>
<div id="block2"></div>

http://jsfiddle.net/d4agp0h6/

提前致谢

Answer 1

一个更简单的方法是使用嵌套的 divs 而不是试图将两个放在同一个 block 元素中。

这是 updated jsFiddle

因此，您创建了一个包装器 (#block1)，它是整个页面的大小，因此您可以在其中移动内容。在此区域内放置每个后续内容，以便您可以设置边距、位置等。

HTML

<div id="block1">
    <div id="block2">
        <div id="content">
            <p>This is some text</p>
        </div>
    </div>
</div>

然后，使用您的 CSS 设置相对于彼此的位置，这样您就可以使用边距和百分比间距来保持流畅。

CSS

#block1 {
    position:relative;
    top:10px;
    left:0px;
    width:200px;
    height:400px;
    background:#555;
}

#block2 {
    position:relative;
    width:75%;
    height:100%;
    float:right;
    margin:0 auto;
    background-color:#999;
}

#content {
    margin:0 auto;
    border:1px solid black;
    position:relative;
    top:45%;
}

#content p {
    text-align:center;
}