SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist sputza's Avatar
    Join Date
    Jan 2002
    Location
    Canada
    Posts
    528
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Vertically Center text within div

    I have a div that contains a list which I am using as a menu. I need to have the text vertically centered within the list. I have tried lost of things to center the text vertically without success. How can I fix my problem? Here is the html and css:

    HTML Code:
                <div id="leftMenu">
                    <ul>
                        <li class="menuTop"><a href="#" onClick="_OLEShowPDP_; return false;">My PDP</a></li>
                        <li class="menuMiddle"><a href="#" onClick="_OLEShowTraining_; return false;">My Training</a></li>
                        <li class="menuMiddle"><a href="#" onClick="_OLEShowRecords_; return false;">My History</a></li>
                        <li class="menuBottom"><a href="#" onClick="_OLEShowProfile_; return false;">My Profile</a></li>
                    </ul>
                
                </div>
    HTML Code:
    #leftMenu {
        position: relative;
        float: left;
        width: 160px;
        background-color:#00FF00;
        text-indent: 12px;
    }
    
    #leftMenu a {
        color: #ffffff;
        font-family: Tahoma, Arial, Helvetica;
        font-weight: bold;
        text-decoration: none;
    }
    
    #leftMenu a:hover {
        text-decoration: underline;
    }
    
    #leftMenu ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    
    #leftMenu li {
        margin: 0;
        padding: 0;
    }
    
    .menuTop {
        background-image: url(images/mypdp.gif);
        background-repeat: no-repeat;
        background-position: left top;
        height: 31px;
        text-align: left;
    }
    
    .menuTop:hover {
        background-image: url(images/mypdp.gif);
        background-position: -160px;
    }
    
    .menuMiddle {
        background-image: url(images/myhistory.gif);
        background-repeat: no-repeat;
        background-position: left top;
        height: 31px;
    }
    
    .menuMiddle:hover {
        background-image:url(images/myhistory.gif);
        background-position: -160px;
    }
    
    .menuBottom {
        background-image: url(images/myprofile.gif);
        background-repeat: no-repeat;
        background-position: left top;
        height: 34px;
    }
    
    .menuBottom:hover {
        background-image: url(images/myprofile.gif);
        background-position: -160px;
    }
    Thanks in advance for any help. If you need any additional info, let me know and I will post more info.
    Steven Watkins
    Chief Web Ninja
    Code Monkey Interactive
    lowgravity.ca

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I assume you mean the text vertically centered within each <li>?

    Instead of applying the background images, heights and hover to the <li>s, set the <a> elements to block display and apply all the above styles to the <a>s as well as setting the line height to equal the <a> height.

  3. #3
    SitePoint Evangelist sputza's Avatar
    Join Date
    Jan 2002
    Location
    Canada
    Posts
    528
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Quote Originally Posted by Centauri View Post
    I assume you mean the text vertically centered within each <li>?

    Instead of applying the background images, heights and hover to the <li>s, set the <a> elements to block display and apply all the above styles to the <a>s as well as setting the line height to equal the <a> height.
    Thanks for your reply. I understand what you are saying... I'm not sure if that can be done with my design. Here is a link to a screen shot:
    http://www.lowgravity.ca/deleteme/leftMenu.gif

    Thanks again for any help.
    Steven Watkins
    Chief Web Ninja
    Code Monkey Interactive
    lowgravity.ca

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If you are just talking about vertically aligning the text then simply set the line-height to thesame as the height of that element.

    e.g.
    Code:
    #leftMenu li {line-height:31px;}
    .menuBottom {
        background-image: url(images/myprofile.gif);
        background-repeat: no-repeat;
        background-position: left top;
        height: 34px;
        line-height:34px;
    }
    This assumes that text wrapping isn't going to occur otherwise the lines will be too high. If you want text to wrap then you should use equal padding top and bottom instead and lose the height.

  5. #5
    SitePoint Evangelist sputza's Avatar
    Join Date
    Jan 2002
    Location
    Canada
    Posts
    528
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Quote Originally Posted by Paul O'B View Post
    Hi,

    If you are just talking about vertically aligning the text then simply set the line-height to thesame as the height of that element.

    e.g.
    Code:
    #leftMenu li {line-height:31px;}
    .menuBottom {
        background-image: url(images/myprofile.gif);
        background-repeat: no-repeat;
        background-position: left top;
        height: 34px;
        line-height:34px;
    }
    This assumes that text wrapping isn't going to occur otherwise the lines will be too high. If you want text to wrap then you should use equal padding top and bottom instead and lose the height.
    Works awesome. Thanks Paul. You always bail me out when I need it.
    Steven Watkins
    Chief Web Ninja
    Code Monkey Interactive
    lowgravity.ca

  6. #6
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul's solution is the same as what I was saying, with the addition of moving the backgrounds and hover to the <a> elements - IE6 will not recognise hover on anything other than links, so your menu hover will not work in IE6.


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
  •