We help IT Professionals succeed at work.

Vertical Align Anchor Text With Anchor Image using CSS

maddhacker24
maddhacker24 asked
on
I can not for the life of me figure out this simple little task. I need the RSS Text to vertically align with the rss icon. I have tried playing with margins, padding, line-height, vertical-align, etc....none seem to work for me.  Im testing in IE 8 and Chrome.

I know its something probably so simple but I have racked my brain for the last hour to no end.  I attached a small snippet of what I have.

Thanks!
<html>
<head>
	<title>CSS Test</title>
	<style type="text/css">
	#Box {
		width: 75px;
		height: 28px;
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
		background: url("http://216.66.56.37/images/PopcornTrail_BG.gif");
	}
	
	#Box a {
		vertical-align: middle;
		color: #ff9933;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 14px;
		font-weight: bold;
		text-decoration: none;
	}
	</style>
</head>
<body>
	<div id="Box">
		<a href="#"><img src="http://216.66.56.37/images/icons/rss.gif" width=28" height="28">RSS</a>
	</div>
</body>
</html>

Open in new window

Comment
Watch Question

JF0

Commented:
Why would you not just use a single image for this? Right now you are using 2 images + text to create one very simple button.
Top Expert 2010
Commented:
add this to your style sheet


#Box img {
	vertical-align: middle;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
			  }

Open in new window

Author

Commented:
Thank you!