/ Published in: CSS
[via rtcrm]
This will vertically align a block-level element inside a fixed-height containing block-level element. Note: you must know the exact pixel height of the containing element!
This will vertically align a block-level element inside a fixed-height containing block-level element. Note: you must know the exact pixel height of the containing element!
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
<div class="valign" style="height: 500px"> <div class="vertical"> <div id="center"> This line will be vertically centered at 250px inside a 500px high DIV </div> </div> </div> /* Vertical align -- You must specifiy height on "valign" element */ .valign { position: relative; } .valign[class] { display: table; position: static; } .valign .vertical { position: absolute; top: 50%; } .valign .vertical[class] { display: table-cell; vertical-align: middle; position: static; } .valign .center { position: relative; top: -50%; } .valign .center[class] { position: static; }