Keep the content inside absolutely positioned DIVs centered (inside parent container)
Question
I have a container with with fixed width and centered. Inside of the container I have two DIVs position relative to the window side by side. Inside of these Divs I've other content which I want to be centered (preferably with container).
here is simplified code: http://jsfiddle.net/jTpGs/
<!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>
1 answers
solution1
0 2012-12-19 03:29:42
Add to this to your CSS to center your text in the middle of those boxes:
#windowdiv p, #windowdiv2 p {
text-align: center;
height: 100%;
line-height: 180px;
}
This is assuming that your boxes are fixed height, because we set the line-height. (200px - 20px (padding-top) = 180px)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.