保持绝对定位DIV中的内容居中（在父容器内）

我有一个宽度固定且居中的容器。在容器内部，我有两个DIV相对于窗口并排放置。在这些Div的内部，我还有其他想要居中的内容（最好是容器）。保持绝对定位DIV中的内容居中（在父容器内）

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<style> 
#container { 
width: 960px; 
height: 1000px; 
background: red; 
margin: 0 auto; 
} 

#windowdiv { 
height: 200px; 
background: purple; 
padding-top: 20px; 
position: absolute; 
left: 0; 
right: 30%; 
top: 25px; 
} 
#windowdiv2 { 
height: 200px; 
background: blue; 
padding-top: 20px; 
position: absolute; 
left: 60%; 
right: 0; 
top: 10px; 

} 

</style> 
</head> 
<body> 
    <div id='container'> 

    <div id='windowdiv'> 
     <p>some content</p> 
    </div> 
    <div id='windowdiv2'> 
     <p>some content</p> 
    </div> 
</div> 
</body> 
</html>

来源

2012-12-19 siner55

我觉得它有点不清楚，它是你要求什么。你能详细说明一下吗？ – sooper

检查代码http://jsfiddle.net/jTpGs/。我想要包含父容器中的p标签，并且相对于容器div居中，而不是窗口大小。 – siner55

是这样的：http://jsfiddle.net/jTpGs/3/？ – Passerby

加入给你的CSS居中在那些箱子中间的文字：

#windowdiv p, #windowdiv2 p { 
    text-align: center; 
    height: 100%; 
    line-height: 180px; 
}

这是假设你的箱子是固定的高度，因为我们设置了行高。（200px - 20px（padding-top）= 180px）

来源

2012-12-19 03:29:42

我想p元素内#Container div – siner55

对不起，我不明白你的意思。我看到#windowdiv和＃windowdiv2 div中的文字。阐述。 –

查看我的问题下面的评论 – siner55

保持绝对定位DIV中的内容居中（在父容器内）

回答

相关问题