Vertical + Horizontal aligment

On 1-5-2005, in Coding, CSS, by Alex

CSS:

html,body {margin: 0; padding: 0; height: 100%;}

#outer {height: 100%; width: 100%; overflow: hidden; position: relative; display: block;}
#outer[id] {display: table; position: static;}

#middle {position: absolute; top: 50%; display: block; width: 100%; text-align: center;} /* for explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; position: static;}

#inner {position: relative; top: -50%;} /* for explorer only */
#inner[id] {position: static;} /* optional */

xHTML:

<div id="outer">
   <div id="middle">
      <div id="inner">
           <img src="." alt="some alt"/>
           <p>some text</p>
      </div>
   </div>
</div>

 

Comments are closed.