SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Addict
    Join Date
    Aug 2007
    Posts
    328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Vertical alignment for a list item

    Hi Guys,
    I'm having a little trouble with my list items.
    No matter what I set the vertical list alignment to, the text always stays at the top.

    I've set the vertical alignment to middle, but it hasn't budged.

    Here's my css, what's missing from it?

    Code:
    #main_menu {
    	border: 1px solid #000000;
    	list-style-type: none;
    	margin: 0px;
    	padding: 0px;
    	bottom: 30px;
    }
    #main_menu  li {
    	text-align: left;
    	text-indent: 20px;
    	background-image: url(images/menu-link-background-copy2.png);
    	background-repeat: repeat-x;
    	margin: 0px;
    	padding: 0px;
    	height: 60px;
    	vertical-align: middle;
    }

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The vertical-align property only applies to inline boxes and table cells. A list item is neither, and this property isn't inherited.

    What are you trying to align to, anyway? There's no mention of a line height anywhere that I can see.

    If you have a number of inline boxes within the line box of the list item, then you can specify the vertical alignment of those. For instance,
    Code CSS:
    #main_menu li img {vertical-align:middle}

    BTW, the bottom:30px declaration in the first rule will be ignored, if the element isn't positioned (which it doesn't appear to be).
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Addict
    Join Date
    Aug 2007
    Posts
    328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    what I'm trying to do is to have the text appear vertically central in the li.

    At the moment the text just sticks to the top of the li.

    In other words, I'm trying to get the text within the li to be of equal distance between the top of the li and the bottom of the li.

    For example, if the li is 20px in height, I would want the text to be 5 px from the top and 5px from the bottom (Assuming that the font size is 10px).

  4. #4
    SitePoint Zealot Rexibit's Avatar
    Join Date
    Jul 2008
    Location
    United States
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The vertical-align is also not compatible with all browsers. The line-height attribute is about the only thing which can help vertically align in most cases. Even then, it is only possible for one line of text, otherwise it just leads to an equal spacing of several lines (which is a nice way to achieve a clean layout for a paragraph in print style.)

    Quote Originally Posted by stevex33 View Post
    Hi,
    what I'm trying to do is to have the text appear vertically central in the li.

    At the moment the text just sticks to the top of the li.

    In other words, I'm trying to get the text within the li to be of equal distance between the top of the li and the bottom of the li.

    For example, if the li is 20px in height, I would want the text to be 5 px from the top and 5px from the bottom (Assuming that the font size is 10px).
    Padding is what you need then. Add a 5px padding to your li element.
    Rexibit Web Services
    Don't just build it - CSS it

  5. #5
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rexibit View Post
    The vertical-align is also not compatible with all browsers. The line-height attribute is about the only thing which can help vertically align in most cases.
    The line-height property doesn't change the vertical alignment, it just affects the height of the line boxes. The vertical-align property controls the vertical alignment of inline boxes within these line boxes, so they do sort of work as a pair.
    Birnam wood is come to Dunsinane

  6. #6
    SitePoint Addict
    Join Date
    Aug 2007
    Posts
    328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah, well vertical align was my misunderstanding then
    Padding works as I expected it to, thanks for that, although I was hoping to have it automatically go in the middle rather than specifying an exact position.

    Do you think the creators will ever implement something like that in css?

    thanks again

  7. #7
    SitePoint Guru tictike's Avatar
    Join Date
    Apr 2008
    Location
    Canada
    Posts
    863
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is this what you're after?

    If you set height and line-height to be equal, text will center vertically. Try this code for example.

    ul {
    border: 1px solid #000000;
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    }
    li {
    text-align: left;
    text-indent: 20px;
    background-image: url(images/menu-link-background-copy2.png);
    background-repeat: repeat-x;
    margin: 0px;
    padding: 0px;
    line-height: 60px;
    height: 60px;

    }
    Last edited by tictike; Jul 28, 2008 at 13:06. Reason: edit

  8. #8
    SitePoint Addict
    Join Date
    Aug 2007
    Posts
    328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ah ha, yes that's exactly what I was after.

    It works and makes perfect sense as well.
    I'm not surprised that I didn't figure that one out on my own, thanks a lot

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Setting the line-height to the same value as the height (as suggested above )will automatically align the text in the middle of the line by default. It's a method I use quite a lot. The only problem would occur was if the text was going to wrap to another line then you would have great big lines.

    Therefore its fine to do this as long as you only have single lines of text that aren't going to wrap.


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
  •