Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Jan 2009
    Posts
    160
    Thanks
    40
    Thanked 1 Time in 1 Post

    Question aligning text vertically to center of list item

    I have a list with a background as well as with a custom list background image. The problem is the the height of the image is larger then the normal bullet.

    So when the text appears next to it it is at the bottom of the image when I want it to appear in teh center of it.

    I cant seem to achieve this with margin, padding or vertical align.. what am i missing?

  • #2
    met
    met is offline
    Regular Coder
    Join Date
    Oct 2009
    Location
    United Kingdom
    Posts
    728
    Thanks
    4
    Thanked 119 Times in 119 Posts
    Code:
    li { 
        /* these 2 properties are needed */
        display:table-cell; 
        vertical-align:middle;  
        
        /* for the example */
        background:red; 
        padding:5px; 
        height:40px; 
    }
    the above centers text within any element (li in this case) vertically.

    it's also likely that any "line-height:" declarations are messing with the padding/margin values you are trying. See if my provided code does what you require

  • #3
    New Coder
    Join Date
    Jul 2010
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    set the proper line height for list item and padding top or padding bottom option to align text vertically to the center, you can also set vertical align to middle if the line height is fixed...


  •  

    Posting Permissions

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