Keeping content centered vertically with only CSS? - css

Question

I have a content area that should behave in the following way:
Content is centered vertically if there's no vertical overflow (currently achieved via display:table/-cell)
No scrollbar is displayed unless there is vertical overflow
the height of the containing div never changes
I've only been able to satisfy the first point - fiddle:
http://jsfiddle.net/PTSkR/125/
Here's my html:
<div class="row-fluid card-box">
<div class="span4 side-study-box">
<div class="side-box-content">
<pre class="text-content-saved">TEST
TEST</pre>
</div>
</div>
</div>
Css:
.side-study-box {
background-color: white;
color: black;
border: 1px solid #3D6AA2;
text-align: center;
height: 160px;
max-height: 160px;
display: table ;
margin: 0px ;
margin-left: -1px;
position: relative;
overflow-y: scroll ;
}
.side-study-box .side-box-content {
width: calc(100%);
height: 160px;
float: right;
display: table;
overflow-y: scroll ;
background-color: white;
}
/*#region CONTENT AREAS */
/*#region TEXT CONTENT */
.side-study-box .text-content-saved {
width: calc(100%+29px);
font-size: 24px;
display: table-cell;
vertical-align: middle;
text-align: center;
height: 160px !important;
max-height: 160px ;
background-color: white;
padding: 0px ;
margin: 0px ;
border: 0px ;
overflow-y: scroll;
}
Unfortunately I can't use js as part of the solution... is this possible with only css?

Answer 1

You can use overflow:auto; to achieve the second point and set the following:
word-break: normal !important;
word-wrap: normal !important;
white-space: pre !important;
fiddle: http://jsfiddle.net/PTSkR/134/
Keep in mind that since you are using a pre tag, it means that all the white spaces and line breaks formatting counts so any white space or extra line could cause the overflow and you might miss that. See here