CODEWITHSUNDEEP
css
Skyline969
Skyline969

Reputation: 431

Vertically aligning a div and proper scrolling overflow, is this possible?

I've discovered that I can have one or the other, but can't seem to figure out both.

My HTML is as follows:

<div id="middle">
    <div id="middleinner"></div>
</div>

And the CSS goes a little something like this (z-indexes set for something else on the page, left out here because it's irrelevant, plus there's a few commented out things as I tried to figure it out as I went along):

html, body{
        font-family: helvetica, sans-serif;
        font-size: 1em;
        height: 100%;
        overflow: hidden;
}

#middle{
/*      display: table;*/
        display: table;
        height: 80%;
        width: 90%;
/*      position: fixed;*/
        position: absolute;
        top: 10%;
        left: 5%;
        right: 95%;
        bottom: 90%;
        color: #000;
        z-index: 0;
}

#middleinner{
        padding: 0.5em 1em 0.5em 1em;
        background-color: #F9F9F9;
        display: table-cell;
/*      display: inline-block;*/
        border-radius: 1.5em;
        vertical-align: middle;
/*      margin-left: auto;
        margin-right: auto;*/
        text-align: center;
/*      position: relative;*/
        position: absolute;
        width: 100%;
        height: 100%;
        overflow: auto;
        z-index: 20;
}

Anyway, if I change middleinner's position to relative instead of absolute, I've got vertical alignment at the cost of proper overflow handling. If I set it to absolute, I've got proper overflow handling at the cost of vertical alignment.

Is there a pure-CSS way that I can handle this?

Upvotes: 2

Views: 4840

Answers (1)

Madara&#39;s Ghost
Madara&#39;s Ghost

Reputation: 174957

Yes, a combination of line-height, inline-block, and vertical-align can do it.

#middle {
    width: 80%;
    margin: 10px auto;
    border: 1px dashed black;
    height: 500px;
    line-height: 500px;
    vertical-align: middle;
    text-align: center;
}
#inner {
    height: 50px;
    width: 80%;
    overflow: auto;
    display: inline-block;
    line-height: 1.1em;
}

Demo

To have it work with a dynamic height element, you'll have to use some JavaScript, since you're using jQuery, I'll go with that. It's perfectly possible to use vanilla JS for this one too.

resize = function(el) {
    el.css({lineHeight: el.height() + "px"})
};
$(document).ready(function() {
    var $middle = $("#middle");
    resize($middle);
    $(window).on("resize", function() {
        resize($middle);
    })
})

Upvotes: 1

Related Questions