How do I vertically align navigation links ?

wbmkk · Nov 23, 2009

Hello

I've be doing a bit of CSS practice and found that I can not align vertically my navigation links, so the wording sits nicely inside the imaginary button.

Can anybody assist please.

See attached code & CSS below

<html>
<head>

<style type="text/css">

a {
display: block;
border: 2px solid;
border-color: white black black white;
height:3em;
width: 8em;
display:table-cell;
vertical-align:middle;
text-align:center;
background: #CC9933;
margin-bottom:1em;
}

a:hover
{
position: relative;
top: 1px;
left: 1px;
border-color: black white white black;
}

</style>
</head>
<body>
<a href="http://www.yahoo.co.uk">Yahoo</a><br />
<a href="http://www.Google.com">Google</a><br />
<a href="http://www.yahoo.co.uk">Yahoo is here</a><br />
<a href="http://www.yahoo.co.uk">Yahoo</a><br />
</body>
</html>

Many thanks in advance

PixelPusher · Nov 23, 2009

To align anchor text horizontally you should use the text-align style. To vertically align anchor text, I suggest you use line-height. The line height must be set on a block element that has a declared height. If your anchors (links) are set to display block they you can set it on them, if not it must be applied to the parent container (like a div, li, span, etc.) For example:

HTML:

<ul class="navbar">
   <li><a href="">link</a></li>
   <li><a href="">link</a></li>
   <li><a href="">link</a></li>
<ul>

Code:

ul.navbar {
   margin:0;
   padding:0;
}
ul.navbar li {
   float:left;
   list-style-type:none;
   margin:0;
   padding:0;
}

ul.navbar a {
   display:block;
   height:30px;
   line-height:30px;
   font:bold 10pt Tahoma, Arial, San-serif;
   color:#fff;
   text-align:center;
   text-decoration:none;
   text-transform:capitalize;
   padding:0 15px;
   margin:0;
}
ul.navbar a:hover {
   color:#555;
}

How do I vertically align navigation links ?

wbmkk

New Member

PixelPusher

Super Moderator