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 4 of 4
  1. #1
    Regular Coder
    Join Date
    Jan 2008
    Posts
    334
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Button verical-align

    Hey, I'm working on a project and I'm now working on making the navigate buttons for the website now... So anyways, I have the following code for the links:

    Code:
    #links {
    color:#fff;
    font-size:13px;
    font-weight:normal;
    margin:0px auto;
    width:700px;
    height:25px;
    border-right:1px solid #000;
    border-left:1px solid #000;
    border-top:0px;
    border-bottom:1px solid #000;
    background-image:url('/images/bg.gif');
    }
    
    #top_links a:link, a:visited {
    color:#fff;
    font-size:12px;
    font-weight:5px;
    font-variant:normal;
    text-decoration:none;
    font-family:arial, helvetica,clean,sans-serif;
    background-image:url('/images/a_link1.gif');
    display:block;
    width:92px;
    height:25px;
    border-right:1px solid #000;
    border-left:1px solid #000;
    }
    
    
    #top_links a:hover {
    color:#fff;
    font-size:12px;
    text-decoration:none;
    background-image:url('/images/a_hover.gif');
    }
    My problem here is that I can'ts get my text inside of the button that I put in there to vertical-align to the middle, so here I am.... Help!!!


    Thanks guys.

  • #2
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    Give your link a line-height equal to the height of the button, like so:

    Code:
    #top_links a:link, a:visited {
    color:#fff;
    font-size:12px;
    font-weight:5px;
    font-variant:normal;
    text-decoration:none;
    font-family:arial, helvetica,clean,sans-serif;
    background-image:url('/images/a_link1.gif');
    display:block;
    width:92px;
    height:25px;
    line-height:25px;
    border-right:1px solid #000;
    border-left:1px solid #000;
    }
    matt | design | blog

  • #3
    Regular Coder
    Join Date
    Jan 2008
    Posts
    334
    Thanks
    9
    Thanked 0 Times in 0 Posts
    That worked. Thanks.

  • #4
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    You probably know the following will apply to all "#top_links a:link" and to all "a:visited" regardless of the div it is in, right?

    Code:
    #top_links a:link, a:visited {
    color:#fff;
    font-size:12px;
    font-weight:5px;
    font-variant:normal;
    text-decoration:none;
    font-family:arial, helvetica,clean,sans-serif;
    background-image:url('/images/a_link1.gif');
    display:block;
    width:92px;
    height:25px;
    border-right:1px solid #000;
    border-left:1px solid #000;
    }
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls


  •  

    Posting Permissions

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