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>

 

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>