Last Updated: February 25, 2016
·
1.156K
· _faz

Vertical align everything !

CSS

<style>
.wrapper:before {
    /* IE6-7 inline-block support */
    display: inline-block;
    *display: inline;
    zoom: 1;

    height: 100%;  /* or whatever you want */
    content: "";
    width: 0;
    vertical-align: middle;
    margin: 0 0 0 -10px;  /* Makes pseudo-element disappear */
}

.wrapper:after {
    clear: both;  /* Release the flow ! */
}

.wrapper {
    height: 300px;
    border: 1px solid #ccc;
}

.element {
    display: inline-block;
    *display: inline;
    vertical-align: middle;
    zoom: 1;

    /* for demo */
    text-align: center;
    font-weight: bold;
    width: 100%;
}
</style>

HTML

<div class="wrapper">
    <div class="element">Bonjour Monde !</div>
</div>

1 Response
Add your response

That's funny, I swear I saw this before on this site. Oh wait, I even did a version of it myself. Glad to know other people are using it.

over 1 year ago ·