1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Div Vertical Align

Discussion in 'CSS' started by jwalker80, Jan 30, 2007.

  1. #1
    Hi,
    SEMrush
    Does anyone know a good way to center content vertically within a div? e.g. vertical align... Also having it browser compliant and if possible making it validate... now there's a big ask!
     
    jwalker80, Jan 30, 2007 IP
    SEMrush
  2. dc dalton

    dc dalton Active Member

    Messages:
    521
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    58
    #2
    You're gonna to have problems cross browser with it right now. vertical-align support is buggy at best.
     
    dc dalton, Jan 30, 2007 IP
  3. unitedrokz

    unitedrokz Peon

    Messages:
    86
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    0
    #3
    this way i do it is putting the content in its own div and using 'top' and margins in css...... ill give you an example.

    #contentdiv {
    position:relative;
    height:60px; ----- must be defined
    width:auto;
    top:50%;
    margin-top:-30px; -------- value must be half the height (and negative)
    }
     
    unitedrokz, Jan 30, 2007 IP
  4. Kalyse

    Kalyse Peon

    Messages:
    1,221
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    0
    #4
    If you google absolute center you find mny tutorials.
     
    Kalyse, Jan 30, 2007 IP
  5. Ginger Ninja

    Ginger Ninja Guest

    Messages:
    161
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #5
    If say I need to vertically align text in a menu bar that has a height of 40px; i'll just set a line-height to 40px also. It looks Ok until you rezise the text then you can notice the bug. But its worked alright for me in the past.
     
    Ginger Ninja, Jan 30, 2007 IP
  6. unitedrokz

    unitedrokz Peon

    Messages:
    86
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    0
    #6
    that works well and i do that too - but it only when its one line of text you are wanting to center

    more than one line and that code doesnt work out well
     
    unitedrokz, Jan 30, 2007 IP
  7. kk5st

    kk5st Prominent Member

    Messages:
    3,487
    Likes Received:
    368
    Best Answers:
    28
    Trophy Points:
    335
    #7
    Vertical align, except in tables, refers to the positioning of inline nodes in the inline box. Line height refers to the leading applied to an inline element. Neither are appropriate for aligning block elements vertically.

    See vertically centering content in a div with css for an example. The demo includes the hacks necessary for IE. IE simply does not support css2 worth a damn, and hacks are required.

    cheers,

    gary
     
    kk5st, Jan 30, 2007 IP
  8. jwalker80

    jwalker80 Peon

    Messages:
    17
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    It works well but doesnt support IE7, I found a hack that gets around IE7, it doesnt validate, but you cant have it every way!
     

    Attached Files:

    jwalker80, Jan 31, 2007 IP
  9. kk5st

    kk5st Prominent Member

    Messages:
    3,487
    Likes Received:
    368
    Best Answers:
    28
    Trophy Points:
    335
    #9
    Interesting.

    I have not seen the # filter before. Can you explain it?

    Further, you have an incomplete DTD, forcing quirks mode. In quirks, IE7 is pretty much the same as IE6 in quirks. And, that's a Bad Thing®. Is quirks a requirement?

    cheers,

    gary
     
    kk5st, Jan 31, 2007 IP
  10. duilen

    duilen Active Member

    Messages:
    354
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    58
    #10
    If you know how many pixels the element you are valigning into is you could use this.

    position:absolute;
    top:400px; /* half the height of the containing element */
    margin-top:-100px; /* half the height of the element you are aligning */
     
    duilen, Jan 31, 2007 IP