Advanced Search

Vertically align within fixed height DIV

/ Published in: CSS
Save to your folder(s)
[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!

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <div class="valign" style="height: 500px">
  2. 	<div class="vertical">
  3. 		<div id="center">
  4. 			This line will be vertically centered at 250px inside a 500px high DIV
  5. 		</div>
  6. 	</div>
  7. </div>
  8.  
  9.  
  10. /* Vertical align -- You must specifiy height on "valign" element */
  11. .valign				{ position: relative; }
  12. .valign[class]			{ display: table; position: static; }
  13. .valign .vertical		{ position: absolute; top:  50%; }
  14. .valign .vertical[class]	{ display: table-cell; vertical-align: middle; position: static; }
  15. .valign .center			{ position: relative; top: -50%; }
  16. .valign .center[class]		{ position: static; }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.