There is a trick to Center elements (vertically or horizontally) that works on
any browser, but may give overflowing problems on low resolutions (when the
viewport os lesser than elements width/height).
The trick consists in placing a wrapper div around your desired one, with 50%
top/left (or margins, depending on the intend), and its immediate child with
-50% offsets (or margins).
Something like this:
<style type="text/css">
div.wrapper {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
background: cyan;
}
div.content {
position: absolute;
top: -50%;
left: -50%;
width: 100%;
height: 100%;
background: red;
}
</style>
<div class="wrapper">
<div class="content">
foo bar
</div>
</div>
__
Paulo Diovani Gonçalves
http://diovani.com
--
--
You received this because you are subscribed to the "Design the Web with CSS"
at Google groups.
To post: [email protected]
To unsubscribe: [email protected]
