Text align issue (css)

[MagSafe]

Hey

I'm having a little issue with these buttons that I've made for a websites primary navigation. As you'll be able to see from the image I can't get the text to vertically align, and have tried everything I can think of to fix it...

...I've not really done them like that before so was hoping someone that has could help out and see if they can think of a fix? So far I've tried vertical-align with css and valign within the td table tag.

Thanks

CSS

#campaigns-menu
{
	background: #658dbd;
}

.campaigns td
{
	margin: 0;
	padding: 0px;
	width: 100px;
	font: normal 8pt arial, helvetica, san-serif;
	color: #ffffff;
	text-decoration: none;
	border: 1px solid #ffffff;
	text-align: center;
	vertical-align: middle;
}

.campaigns a
{
	background: url('graphics/menu/menubackground1.jpg') no-repeat;
	display: block;
	height: 28px;
	text-decoration: none;
}

.campaigns a:hover
{
	background: url('graphics/menu/menubackground2.jpg') no-repeat;
	display: block;
	height: 28px;
	text-decoration: none;
}

HTML

			<div id="campaigns-menu">
				<table class="campaigns">
					<tr>
						<td><img src="graphics/menu/coastalcampaigns.jpg" alt="Coastal Campaigns" width="100px" height="80px" /></td>
						<td><img src="graphics/menu/ecocongregation.jpg" alt="Eco Congregation" width="100px" height="80px" /></td>
						<td><img src="graphics/menu/ecoschools.jpg" alt="Eco Schools" width="100px" height="80px" /></td>
						<td><img src="graphics/menu/keepscotlandtidy.jpg" alt="Keep Scotland Tidy" width="100px" height="80px" /></td>
						<td><img src="graphics/menu/peopleandplaces.jpg" alt="People & Places" width="100px" height="80px" /></td>
						<td><img src="graphics/menu/sustainablescotland.jpg" alt="Sustainable Scotland" width="100px" height="80px" /></td>
						<td><img src="graphics/menu/wasteawarescotland.jpg" alt="Waste Aware Scotland" width="100px" height="80px" /></td>
					</tr>
					
					<tr>
						<td><a style="color: #66B3FF;" href="#">Coastal Campaigns</a></td>
						<td><a style="color: #CC99CC;" href="#">Eco-Congregation</a></td>
						<td><a style="color: #66CC66;" href="#">Eco Schools</a></td>
						<td><a style="color: #66B3FF;" href="#">Keep Scotland Tidy</a></td>
						<td><a style="color: #CC99CC;" href="#">People & Places</a></td>
						<td><a style="color: #66CC66;" href="#">Sustainable Scotland</a></td>
						<td><a style="color: #66B3FF;" href="#">Waste Aware Scotland</a></td>
					</tr>
				</table>
			</div><!-- End of #campaigns-menu -->

 

[HTMLHugo]

line-height:28px

should sort it.

i thikn

 

[MagSafe]

line-height:28px

should sort it.

i thikn

hmm, nice idea but all it's doing is increasing the height of the button and because the background of the <a> links is the image it shows the blue area behind it.

thanks though , i tried -28px and other numbers but it didn't do anything.

 

[Cheetah Designs]

have you tried setting line-height to 28px and the height to 0px?


also have you tried setting padding. Remember you will have to reduce the height by the amount you are padding.


These are just quick suggestions without even looking at the code so they may not be what you are after.

 

[Ed]

Vertical alignment isn't an inherent tool in CSS but as always, there are workarounds. The link itself needs a container such as a DIV which needs to be sized appropriately. The link then needs a top value of 50% and a margin-top value which is negative to the tune of half the text height. This will vertically center it. There will be inconsistencies cross browser but it works in most modern CSS2 browsers.

An example would be:

<style type="text/css">
#link{
  height: 100px;
  width: 150px;
}
#link a{
  line-height: 1.6em;
  position: [i]*depends on container*[/i];
  top: 50%;
  margin-top: -0.8em;
}
</style>
<div id="link">
<a href="#">Some link</a>
</div>

You'll, of course, need to play with the figures but you get the idea.

 

[MagSafe]

Fixed it , after starting again fresh from an evening of rest and a good night's sleep I found a solution ... thanks to HTMLHugo's line-height. I hadn't heard of that before, but when I first applied it to all of the links it wasen't working.

I tried using the line-height: 28px; again but only on the first 5 with inline css, and it works perfectly now - in both IE and Firefox

Thanks for the help to all the posters,

Steven.