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>
Written by Faz
Related protips
1 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
·
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Css
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#