laboratorio caffeina

in few words, just developing

 

Vertical Centering in CSS with Unknown Height (ie7 compatible)

This article of jakpsatweb about vertical alignment is really the only solution I found out about this issue.

I take the Structural solution without Hack as reference, most of all becouse when an hack is not strictly neccesary it's better to avoid it.

Yuhu's code is great.

PLAIN TEXT
HTML:
  1. <div id="outer">
  2.   <div id="middle">
  3.     <div id="inner">
  4.       any text
  5.       any height
  6.       any content, for example generated from DB
  7.       everything is vertically centered
  8.     </div>
  9.   </div>
  10. </div>

PLAIN TEXT
CSS:
  1. #outer {
  2.       height: 400px;
  3.       overflow: hidden;
  4.       position: relative;
  5. }
  6.  
  7. #outer[id] {
  8.       display: table;
  9.       position: static;
  10. }
  11.  
  12. #middle {
  13.       position: absolute;
  14.       top: 50%;
  15. } /* for explorer only*/
  16.  
  17. #middle[id] {
  18.       display: table-cell;
  19.       vertical-align: middle;
  20.       position: static;
  21. }
  22.  
  23. #inner {
  24.       position: relative;
  25.       top: -50%
  26. } /* for explorer only */
  27.  
  28. /* optional: #inner[id] {position: static;} */

but it's not working on ie7, that catches [id] selectors but behaves as ie6.

so what?

according to css selectors we should write those css line more

PLAIN TEXT
CSS:
  1. *:first-child+html #outer[id] {
  2.     position:relative
  3. } /* for explorer 7 only */
  4.  
  5. *:first-child+html #middle[id] {
  6.     position: absolute;
  7.     display:block;
  8.     vertical-align:inherit;
  9.     top: 50%;
  10. } /* for explorer 7 only */
  11.  
  12. /* optional: *:first-child+html #inner[id] {position: relative;} */

have fun :)

Condividi

 
 
commenti
 
diego: 11 May 2007, ore 11:45

very useful… ;)

 
 
Tiago Carvalho: 13 April 2009, ore 5:05

Thank you very much for this tip!

I already knew Yuhu’s code but this is a very important improvement. Congratulations :)

Have you ever thought about talking to Yuhu to update his method?

Cheers [[ ]]

 

Commenta



 
Chiudi
E-mail It