Return to Snippet

Revision: 10923
at January 18, 2009 15:52 by Tate


Updated Code
.wrap {
display: table;
height: 400px;
#width: 175px; /* arbitrary width for IE only */
#position: relative; /* for IE only */
overflow: hidden;
}
.inner {
#position: absolute; /* for IE only */
#top: 50%; /* for IE only */
display: table-cell;
vertical-align: middle;
}
.content {
#position: relative; /* for IE only */
#top: -50%; /* for IE only */
}
.wrap, .content {border: 1px solid green;} /* just borders to see it */
p {padding:5px;}


<div class="wrap">
<div class="inner">
<div class="content">
<p>Any content vertically centered.</p>
</div>
</div>
</div>

Revision: 10922
at January 18, 2009 14:59 by Tate


Initial Code
display:table-cell; 
vertical-align:middle

Initial URL

                                

Initial Description

                                

Initial Title
Vertical Align in a div

Initial Tags

                                

Initial Language
CSS