Posted By

nealwatkins on 07/13/07


Tagged

ie-vert-middle


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

basicmagic


ie-vert-middle


 / Published in: CSS
 

URL: ie-vert-middle

ie-vert-middle

  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.