www.webdeveloper.com
Results 1 to 9 of 9

Thread: vertical align

  1. #1
    Join Date
    Dec 2002
    Posts
    29

    vertical align

    How can I align text vertically in the centre of a div? Like setting 'valign' in a table tag?

    cheers!

  2. #2
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,773
    You can't use vertical-align. That's used to align inline elements, like text and images, in relation to other inline elements within the same block element. The vertical-align property is applied to inline elements, not block elements.

    To accomplish the affect you want, add top padding to the DIV until you get the look you want. There simply is no vertical align that can be applied to block elements to align inline elements within it.

    I think it's really annoying that we can't, but that's the way it is. Can we see the code you're working with, or an image mock-up of the affect you want? There may be other workarounds.
    Last edited by toicontien; 04-26-2004 at 08:35 AM.

  3. #3
    Join Date
    Dec 2002
    Posts
    29
    There isn't any viable work around that i can come up with. There are a few variables that mean i cant set padding or margins to align the text. I think i will just have to make do the way it is for the moment - I can't post any of the stuff for you to look at.
    Thanks for your help

  4. #4
    Join Date
    Dec 2002
    Location
    High on life
    Posts
    10,104
    If you are simply trying to vertically align text to the center, the line-height property.

    Personal website http://www.ryanbrill.com/
    Business website: http://www.infinitywebdesign.com/
    TypeSpace http://www.typespace.org/

    I reject your reality and substitute it with my own!

  5. #5
    Join Date
    Nov 2003
    Location
    Canada
    Posts
    1,592
    Originally posted by pyro
    If you are simply trying to vertically align text to the center, the line-height property.
    For example, if you have a element, such as a div, that you want to have vertically centered, you would do this:
    Code:
    <div style="height: 200px; border: 1px solid #000; line-height: 100px;">This text should be centered vertically in the box</div>
    Hope this helps,
    -Dan
    Windows XP SP2 - theme: Thallos
    AMD Athlon 64 X2 4600+ | ASUS M2N32-SLI Deluxe | 2 * 1024 PC2-6400 Mushkin DDR2-800 | eVGA GeForce 6800XT 256MB | Creative Sound Blaster X-FI Music
    5 * 320GB Seagate Barracuda SATA-II 3Gb/s in RAID 5 | Lite-On 16x DVD-RW | Mitsumi 7-in-1 Floppy drive and card reader
    Samsung SyncMaster 204B 20" TFT LCD | Logitech G15 Keyboard | Logitech G7 Mouse | Seasonic PC160SK Headset

  6. #6
    Join Date
    Feb 2004
    Posts
    178
    in some cases u can throw a spacer.gif in it, 100% height or PX height if u know what u want it to be, then align="absmiddle" on the spacer.gif. "absmiddle" won't validate but it has helped me many times.

  7. #7
    Join Date
    Apr 2004
    Posts
    32
    I haven't used the line-height attribute so you'll have to excuse my elementary questions.

    1. Does line-height accept percentage values?
    2. Would line-height:50% work if you dont have a fixed height?
    Last edited by KarmaKills; 04-29-2004 at 03:34 PM.

  8. #8
    Join Date
    Nov 2003
    Location
    Canada
    Posts
    1,592
    Originally posted by KarmaKills
    I haven't used the line-height attribute so you'll have to excuse my elementary questions.

    1. Does line-height accept percentage values?
    2. Would line-height:50% work if you dont have a fixed height?
    1. No, for some reason, both the line-height and the element hight properties have to be fixed amounts
    2. No

    -Dan
    Windows XP SP2 - theme: Thallos
    AMD Athlon 64 X2 4600+ | ASUS M2N32-SLI Deluxe | 2 * 1024 PC2-6400 Mushkin DDR2-800 | eVGA GeForce 6800XT 256MB | Creative Sound Blaster X-FI Music
    5 * 320GB Seagate Barracuda SATA-II 3Gb/s in RAID 5 | Lite-On 16x DVD-RW | Mitsumi 7-in-1 Floppy drive and card reader
    Samsung SyncMaster 204B 20" TFT LCD | Logitech G15 Keyboard | Logitech G7 Mouse | Seasonic PC160SK Headset

  9. #9
    Join Date
    Dec 2002
    Posts
    29
    Thanks for your help, but unfortunately, i am entering text into these div's dynamically and sometimes they are a single line of text, and sometimes more, so i cant set a line height or padding to set the text to the centre. It is not my favoured solution, but i just threw a table in the div and used valign.
    Any other suggestions are welcome though

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles