View Single Post
Old 09-06-2012, 09:29 AM   PM User | #9
Sammy12
Registered User

 
Join Date: Jun 2011
Posts: 1,063
Thanks: 12
Thanked 241 Times in 240 Posts
Sammy12 is on a distinguished road
There is the vertical-align table hack which is what youtube uses. Wrap the <h2> in two <div>'s like so:

Code:
<div class="vcenter-container">
     <div class="vcenter">
             <h2>Anything</h2>
     </div>
</div>
Centering style:
Code:
.vcenter-container {
     display: table;
     *position: relative; /* ie6 & 7 */
}
.vcenter {
     display: table-cell;
     vertical-align: middle;
     *position: absolute; *top: 50%; /* ie6 & 7 */
}
.vcenter h2 {
     *position: relative; *top: -50%; /* ie6 & 7 */
}
Setup code:
Code:
.banner .vcenter-container {
     height: 125px; /* requirement for vcenter-container */
     width: 100%;
     margin-bottom: 12px;
}

/* this part overwrites stuff on line 99 of style.css */
.banner h2 {
     padding-bottom: 0 !important;
     height: auto !important;
     line-height: auto !important;;
}

Last edited by Sammy12; 09-06-2012 at 11:08 AM..
Sammy12 is offline   Reply With Quote