Positioning a div in the centre but with dynamic height?
I want to position a div in the middle of the page. The solution I found on the internet assumes that the div will be of static size. I need the div to be in the middle, if the content is the right size, but if it is over th开发者_运维百科e size of the div, it should become bigger, and eventually allow scrolling without changing the width.
PS: I don't need support for IE, just XULRunner (Firefox) and Webkit based browsers.
Edit: The whole page must be scrollable, not just the content div. And I need to preserve all the line breaks.
Here you go:
<style>
.container{
border: 1px solid Red;
width: 300px;
height: 500px;
display:table-cell;
vertical-align:middle;
}
.content{
border: 1px solid Blue;
width: 100px;
height:auto;
min-height: 100px;
max-height:200px;
margin-left:auto;
margin-right:auto;
overflow:auto;
}
</style>
<div class="container">
<div class="content">
add content here
</div>
</div>
How it looks like:
Test it.
If you don't need IE support use vertical-align property:
- make the body displays as table
- an outer div as table-cell and set it's vertical-align as 'middle'
like:
<style type="text/css" media="screen">
html{
height: 100%;
}
body {
width: 100%;
height: 100%;
display: table;
margin: 0;
}
#div_1 {
display: table-cell;
text-align: center;
vertical-align: middle;
line-height: 100%;
}
#div_2 {
width: 200px;
padding: 10px;
border: 1px solid black;
margin: auto;
}
</style>
<body>
<div id="div_1">
<div id="div_2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</body>
EDIT: A more cross-browser implementation you would make the body like that:
<body>
<table>
<tr><td>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</td></tr>
</table>
</body>
once display: table doesn't works well with IE7 and early (looks like should work on ie8, but I still couldn't make it)
加载中,请稍侯......
精彩评论