SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: Vertical align

  1. #1
    SitePoint Wizard subnet_rx's Avatar
    Join Date
    Aug 2001
    Location
    Hattiesburg, MS
    Posts
    1,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Vertical align

    This property has never worked for me in CSS. I'd love to know when this is supposed to be used. Right now, I'm trying to vertically align an H1, and I don't want to use line-height to align it since I'd like it to go to the bottom of the div.

  2. #2
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  3. #3
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Vertical-align only applies to inline boxes, and controls the vertical alignment of separate inline boxes within the same line box.

    H1 is a block-level element which normally generates a block box, so it's not affected by vertical-align.

    What you need is positioning:
    HTML Code:
    <div id="my-div">
      <h1>Heading</h1>
      ...
    </div>
    Code:
    #my-div {
      position:relative; /* Establish as containing block for positioned children. */
    }
    
    h1 {
      position:absolute;
      bottom:0;
    }
    Birnam wood is come to Dunsinane


Bookmarks

Posting Permissions

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