Vertical centering of a horizontal-scrolling div
I'm probably missing something very simple here, but please bear with me.
What I want is a div, filling 100% of the width of its parent div (and no more), vertically centered within its parent div, containing content which should horizontally scroll rather than wrapping. Both the inner div and the parent div have variable heights.
I've managed to get the inner div to scroll its content without wrapping by applying this CSS to it:
.content {
white-space: nowrap;
overflow: auto;
}
I attempted to center this vertically within its parent div with the following CSS:
.container {
height: 500px; /* For testing purposes. */
display: table-cell;
vertical-align: middle;
}
But as soon as I do this, the inner div stops obeying the overflow: auto rule, and it expands to fill its contents. Try it yourself with and without the display: table-cell line and watch what happens:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style>
.container {
background-color: #DDD;
height: 500px;
dis开发者_StackOverflow社区play: table-cell;
vertical-align: middle;
}
.content {
background-color: #EEE;
white-space: nowrap;
overflow: auto;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<p>This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test.</p>
</div>
</div>
</body>
</html>
How can I get the div to vertically center without making it expand to fill its contents?
I think I've worked it out for myself. This works in Google Chrome - I have yet to test it in other browsers.
The trick is to use the standard table-cell method with vertical-align set to middle. In order to stop the table from expanding to fill its contents, I use table-layout: fixed. It seems to work.
Example code:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style>
.wrapper {
background-color: #CCC;
display: table;
table-layout: fixed;
width: 100%;
height: 500px; /* For example. */
}
.container {
background-color: #DDD;
display: table-cell;
vertical-align: middle;
}
.content {
background-color: #EEE;
white-space: nowrap;
overflow: auto;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="content">
<p>This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test.</p>
</div>
</div>
</div>
</body>
</html>
you'll need to use a different vertical centering technique because making something display:table-cell makes it display like a table tr td which means that the behaviour you are observing is correct, as table cells expand to fit the content and there is no overflow. (wow thats a long sentence)
try using the absolute positioning negative margin tecnique:
#parent { position:relative; }
#content { position:absolute; top:50%; margin-top:-50%; }
css is not tested and is off the top of my head but thats the general idea of how it works.
加载中,请稍侯......
精彩评论