Results 1 to 14 of 14
  1. #1
    Join Date
    Jun 2004
    Location
    Northwest Colorado
    Posts
    4,630

    Cool How To Center Vertically with CSS

    Unfrozen Caveman Webmaster here with a tip!

    When I designed with table-based layout, I designed many layouts with blocks of text vertically centered in a table cell. Piece of cake! Unfortunately, css doesn't seem to provide an easy alternative, although I'm very new to table-free css layout. I have come across two methods (hacks, whatever).

    To vertically center a single line, set its line-height to the height of the element you are centering it in.

    For blocks of content, today I stumbled across the following solution, which is so elegant and well-presented I thought I'd share it here:

    www.wpdfd.com/editorial/thebox/deadcentre4.html

  2. #2
    Join Date
    Nov 2004
    Location
    Detroit
    Posts
    2
    thats a good hack, thanks for sharing

  3. #3
    Thanks for sharing. But I don't really understand

  4. #4
    Join Date
    Sep 2000
    Location
    Alberta, Canada
    Posts
    3,109
    The caring is in the sharing.  The learning is in the doing.  
    PotentProducts.com - for all your Hosting needs
    Helping people Host, Create and Maintain their Web Site
    ServerAdmin Services also available

  5. #5
    Join Date
    Jun 2004
    Location
    Bay Area -USA
    Posts
    1,738
    Thanks! I've been looking for something like this!
    <<< Please see Forum Guidelines for signature setup. >>>

  6. #6
    Thanks for sharing! I've always wondered how to do this

  7. #7
    Join Date
    Dec 2004
    Location
    North Shore
    Posts
    95
    Nice tip. Thanks for sharing

  8. #8
    Join Date
    Dec 2003
    Location
    ./Southest Missouri
    Posts
    601
    I bet I've gone through 4 can's of Mt. Dew messing with that, trying to get it to work before coming across this article... now I'm too wired to sleep... might as well go do some more work! Thanks.

  9. #9
    Join Date
    Jan 2005
    Location
    Derby, UK
    Posts
    15
    Cheers dude. I use this on my domain name registration 'please wait' page.

  10. #10
    Nice one

    Jan

  11. #11
    Join Date
    Mar 2004
    Posts
    996
    Good hack. Thanks BigBison!

  12. #12
    yeah thanks for sharing

  13. #13
    Wow nice hack, I've been looking for something like this for a loong time. thnx a bunch

  14. #14
    Join Date
    Dec 2005
    Location
    New York City
    Posts
    4
    pretty cool

    i used to just have like a bottom or top margin until its centered

  15. Newsletters

    Subscribe Now & Get The WHT Quick Start Guide!

Related Posts from theWHIR.com

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •