Vertical alignment in a div

Discussion in 'HTML' started by Nik Coughin, Jan 21, 2004.

  1. Nik Coughin

    Nik Coughin Guest

    How can I make something in a DIV vertically centered without using tables,
    the CSS equivalent (if there is one) of <td valign="middle">?

    ie:

    --------------------------------------------
    xxxxx
    xxxxx
    xxxxx This text is vertically centered
    xxxxx
    xxxxx
    --------------------------------------------

    Where x represents space used by an image
     
    Nik Coughin, Jan 21, 2004
    #1
    1. Advertising

  2. Nik Coughin

    brucie Guest

    in post: <news:bNjPb.18673$>
    "Nik Coughin" <nrkn!no-spam!@woosh.co.nz> said:

    > --------------------------------------------
    > xxxxx
    > xxxxx
    > xxxxx This text is vertically centered
    > xxxxx
    > xxxxx
    > --------------------------------------------
    >
    > Where x represents space used by an image


    theres a few different ways to do it. heres one:
    http://moreshit.bruciesusenetshit.info/vertically-align-thingy.html

    heres another one:
    http://www.w3.org/Style/Examples/007/center.html#vertical

    or you can use margins/padding

    --
    brucie - i usenet nude
     
    brucie, Jan 21, 2004
    #2
    1. Advertising

  3. Nik Coughin

    Nik Coughin Guest

    I like your way better. I already considered resorting to a table cell as
    suggested by W3 (!), but didn't like the idea. Scoured Google for this for
    a while, didn't find anything as elegant as that, got sick of wading through
    the irrelevant bullshit. Thanks a heap.

    "brucie" <> wrote in message
    news:bukjuo$ivc9i$-berlin.de...
    > in post: <news:bNjPb.18673$>
    > "Nik Coughin" <nrkn!no-spam!@woosh.co.nz> said:
    >
    > > --------------------------------------------
    > > xxxxx
    > > xxxxx
    > > xxxxx This text is vertically centered
    > > xxxxx
    > > xxxxx
    > > --------------------------------------------
    > >
    > > Where x represents space used by an image

    >
    > theres a few different ways to do it. heres one:
    > http://moreshit.bruciesusenetshit.info/vertically-align-thingy.html
    >
    > heres another one:
    > http://www.w3.org/Style/Examples/007/center.html#vertical
    >
    > or you can use margins/padding
    >
    > --
    > brucie - i usenet nude
     
    Nik Coughin, Jan 21, 2004
    #3
  4. Nik Coughin

    Nik Coughin Guest

    Top posted

    Oops, top-posted. Sorry.
     
    Nik Coughin, Jan 21, 2004
    #4
  5. Nik Coughin

    Mark Parnell Guest

    Mark Parnell, Jan 21, 2004
    #5
  6. Nik Coughin

    Nik Coughin Guest

    Nik Coughin, Jan 21, 2004
    #6
  7. Nik Coughin

    brucie Guest

    in post: <news:yHkPb.18729$>
    "Nik Coughin" <nrkn!no-spam!@woosh.co.nz> said:

    > I already considered resorting to a table cell as
    > suggested by W3 (!), but didn't like the idea.


    using the visual appearance of at table cell (css table model) is not
    the same as using a html table.


    --
    brucie - i usenet nude
     
    brucie, Jan 21, 2004
    #7
  8. In article brucie wrote:
    > in post: <news:bNjPb.18673$>
    > "Nik Coughin" <nrkn!no-spam!@woosh.co.nz> said:


    [vertical-centering]

    > theres a few different ways to do it. heres one:
    > http://moreshit.bruciesusenetshit.info/vertically-align-thingy.html
    >
    > heres another one:
    > http://www.w3.org/Style/Examples/007/center.html#vertical
    >
    > or you can use margins/padding


    Some more methods here:

    http://www.student.oulu.fi/~laurirai/www/css/middle/


    --
    Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
    Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
    tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.
     
    Lauri Raittila, Jan 24, 2004
    #8
  9. Nik Coughin

    Guest

    brucie: Re: Vertical alignment in a div

    On Wed, 21 Jan 2004 11:17:38 +1000, brucie <>
    wrote:
    >theres a few different ways to do it. heres one:
    >http://moreshit.bruciesusenetshit.info/vertically-align-thingy.html


    Could you please repost this page? I'm getting a 404 Shit Not Found error.
    (I've been out of the country and just got back, which is why I didn't see it
    when you first posted it.)


    >
    >heres another one:
    >http://www.w3.org/Style/Examples/007/center.html#vertical
    >
    >or you can use margins/padding
    >
    >--
    >brucie - i usenet nude
     
    , Jan 28, 2004
    #9
  10. Nik Coughin

    Nik Coughin Guest

    Re: brucie: Re: Vertical alignment in a div

    wrote:
    > On Wed, 21 Jan 2004 11:17:38 +1000, brucie
    > <> wrote:
    >> theres a few different ways to do it. heres one:
    >> http://moreshit.bruciesusenetshit.info/vertically-align-thingy.html

    >
    > Could you please repost this page? I'm getting a 404 Shit Not Found
    > error. (I've been out of the country and just got back, which is why
    > I didn't see it when you first posted it.)
    >
    >
    >>
    >> heres another one:
    >> http://www.w3.org/Style/Examples/007/center.html#vertical
    >>
    >> or you can use margins/padding
    >>
    >> --
    >> brucie - i usenet nude


    One of the ways that it was done on that page (I made the original request)
    was something like this:

    ..verticalcenter
    {
    vertical-align: middle;
    }

    ....

    <div>
    <img src="Spacer.png" alt="" height="51" width="0" class="verticalcenter"
    />Some text
    </div>

    The text then appears vertically centered in that div. I think that the
    height of the image is important, I seem to vaguely recall someone saying
    that it had to be taller than the text (makes sense if you want to have
    something to vertically center it against).

    There was another method but the above one worked well for me.
     
    Nik Coughin, Jan 28, 2004
    #10
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. dba56
    Replies:
    0
    Views:
    870
    dba56
    Apr 14, 2005
  2. Luc
    Replies:
    2
    Views:
    447
    Sid Ismail
    Jan 19, 2004
  3. Jim Heavey

    Vertical Alignment

    Jim Heavey, Mar 2, 2004, in forum: HTML
    Replies:
    10
    Views:
    797
  4. Arondelle
    Replies:
    12
    Views:
    791
    Spartanicus
    Jul 18, 2004
  5. Slick50
    Replies:
    2
    Views:
    474
    dorayme
    Dec 3, 2006
Loading...

Share This Page