Vertical centering text in CSS

Discussion in 'HTML & Website Design' started by lonewolff, May 12, 2009.

  1. #1
    Hi,

    I have a vertical menu. Each menu item has a background image of 260 x 30 pixels. My menu is displaying correctly but the text is positioned towards the top of each image.

    How can I center the text (vertically) so that it is positioned in the middle of each menu box?

    I have tried heaps of things but cant move the vertical position of the text.

    Any help would be greatly appreciated. :)
     
    lonewolff, May 12, 2009 IP
  2. Kerosene

    Kerosene Alpha & Omega™ Staff

    Messages:
    11,366
    Likes Received:
    575
    Best Answers:
    4
    Trophy Points:
    385
    #2
    line-height:30px
     
    Kerosene, May 12, 2009 IP
  3. amit.lakecrest

    amit.lakecrest Peon

    Messages:
    24
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    You would need to edit your css to allign text in center , else you can insert one more table alligned center and put your text inside it.
     
    amit.lakecrest, May 12, 2009 IP
  4. eyespi

    eyespi Peon

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Have you set padding on the element?
     
    eyespi, May 12, 2009 IP
  5. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #5
    kk5st, May 12, 2009 IP
  6. lonewolff

    lonewolff Member

    Messages:
    338
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    30
    #6
    Thanks for the tips.
    line-height did the job but I will have a look at kk5st's link to try and get more understanding.

    Thanks again :)
     
    lonewolff, May 12, 2009 IP