Center Vertically

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View

I'm trying to find a way to center vertically in
white space, in a way that will compress well when
text size and position changes. I tried padding, but
that does not compress well.

Wayne Sallee

Re: Center Vertically

Wayne Sallee wrote:

Quoted text here. Click to load it

<div class="container">
  <div class="thingy">
    Centre the Thingy in the Container.

<style type="text/css">
    width: 100%;
    height: 16em;
    /* This looks like it doesn't do anything, but it does. */
    position: relative;
    width: 240px; /* If you don't know the width and height... */
    height: 4em;  /* ... then you're screwed!                  */
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -2em;    /* -height/2 */
    margin-left: -120px; /* -width/2  */

Toby A Inkster BSc (Hons) ARCS
[Geek of HTML/SQL/Perl/PHP/Python/Apache/Linux]
[OS: Linux 2.6.12-12mdksmp, up 42 days, 13:14.]

                            PHP Encryption Class /

Re: Center Vertically

Quoted text here. Click to load it

This looks like it does something but it doesn't.

Setting width: 100% on normal flow blocks is usually a bad idea. If
there are no horizontal borders, padding or margins then it does nothing
(the auto width comes to the same value anyway). If there are, you start
getting small overflows often resulting in annoying scrollbars.

Quoted text here. Click to load it

Now instead of these next four properties:

Quoted text here. Click to load it

I would have used more simply:

    top: 0; bottom: 0;
    left: 0; right: 0;
    margin: auto;

which is supported by the specification, but I think I may have heard
doesn't work in IE.

Re: Center Vertically

Thanks, but I want code that will be flexible with
changing with and hight, like <center> is.

Wayne Sallee

Toby A Inkster wrote on 8/2/2007 5:41 AM:
Quoted text here. Click to load it

Site Timeline