advanced code snippet search

We Recommend

CSS: The Definitive Guide CSS: The Definitive Guide
Provides you with a comprehensive guide to CSS implementation, along with a thorough review of all aspects of CSS 2.1. Updated to cover Internet Explorer 7, Microsoft's vastly improved browser, this new edition includes content on positioning, text wrapping (nowrap), lists and generated content, table layout, user interface, paged media, and more.

Posted By

nealwatkins on 07/13/07


Tagged

ie-vert-middle


Versions (?)


Who likes this?

1 person has marked this snippet as a favorite

basicmagic


ie-vert-middle

Published in: CSS 

URL: ie-vert-middle

ie-vert-middle

Plain TextExpand 
  1. <html>
  2. <head>
  3. 	<title>Untitled</title>
  4. <style type="text/css">
  5. #outer {height: 58px;width: 60px; overflow: hidden; position: relative; border: 2px solid green;}
  6. #outer[id] {display: table; position: static;}
  7.  
  8. #middle {position: absolute; top: 50%;} /* for explorer only*/
  9. #middle[id] {display: table-cell; vertical-align: middle; position: static;}
  10.  
  11. #inner {position: relative; top: -50%} /* for explorer only */
  12. /* optional: #inner[id] {position: static;} */
  13. </style>
  14. </head>
  15.  
  16. <body>
  17.  
  18. <ul >
  19.   <li id="outer">
  20.     <div id="middle">
  21.  
  22. 	    <div id="inner">
  23.       any text
  24.  
  25.     </div>
  26. 	</div>
  27.   <li id="outer">
  28.     <div id="middle">
  29. 	    <div id="inner">
  30.       any text<br/>
  31. 	  sdbsdbdbsdfb
  32.  
  33.     </div>
  34.  
  35. 	</div>
  36. </ul>
  37.  
  38.  
  39.  
  40. </body>
  41. </html>
  42. http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
  43. http://www.jakpsatweb.cz/css/priklady/vertical-align-final-solution-en.html
  44.  
  45. http://www.aspekt1.net/ms/dev/vertical-align.html

Report this snippet 

You need to login to post a comment.