...

View Full Version : Button verical-align



Jon W
10-31-2008, 03:55 PM
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:




#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. :)

BoldUlysses
10-31-2008, 04:09 PM
Give your link a line-height equal to the height of the button, like so:


#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;
}

Jon W
10-31-2008, 04:35 PM
That worked. Thanks. :)

jerry62704
10-31-2008, 04:42 PM
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?


#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;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum