We help IT Professionals succeed at work.

Vertical Align Anchor Text With Anchor Image using CSS

maddhacker24 asked
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.

	<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("");
	#Box a {
		vertical-align: middle;
		color: #ff9933;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 14px;
		font-weight: bold;
		text-decoration: none;
	<div id="Box">
		<a href="#"><img src="" width=28" height="28">RSS</a>

Open in new window

Watch Question


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
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


Thank you!