嵌套div用css定位

时间:2013-07-20 14:56:56

标签: css css-float

我想保持我的容器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/

1 个答案:

答案 0 :(得分:0)

使正确内容的位置绝对。这样就可以将其从正常流程中移除,并且不会影响其他div。