css - 使用css定位的嵌套div

Question

我想保持我的容器 div 文本居中对齐，而不管其中的 div 大小。

<div id="container">
     I want to stay at the center
     <div id="right-content">Right div effects centered content
     </div>
</div>

#container {
    text-align:center;
        background-color: #888;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px; 
        min-width: 500px;
        height: 65px;
        margin-top: 60px;
}

#right-content {
background-color:#F00;
display:block;
vertical-align:middle;
float:right;
height: 65px;
color:#FFF; 

}

抱歉，附上正确的内容。

http://jsfiddle.net/YMsR4/12/

---

不，不是垂直的，实际上我想要做的就像下面的代码，但这对于安排静态值的边距无效。应该有更简单的方法。

#container {
text-align:center;
background-color: #888;

border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;

width: 750px;
height: 65px;
margin-top: 60px;

}

#right-content {
background-color:#F00;
float:right;
height: 65px;
color:#FFF; 
position: absolute;
margin-top: -20px;
margin-left: 535px;

}

DIV 是相同的。

http://jsfiddle.net/YMsR4/13/

Answer 1

将 right-content 的位置设为绝对。这样就可以将其从正常流程中移除，并且不会影响其他 div。