Fiddle: http://jsfiddle.net/pMZ5T/HTML:\[code\]<div id="arrowcont"> <img width="30px" height="30px" src="http://stackoverflow.com/questions/11531267/check.jpg" style="float:left;" /> <div id="verticalcenter">Full Guide</div></div><br><br>\[/code\]CSS:\[code\]#arrowcont { height: 40px; width: 275px; border: 1px solid black; vertical - align: middle; background - position: 0 50 % ;}#verticalcenter { vertical - align: middle; background - position: 0 50 % ;}?\[/code\]i want to vertically center both of these so that it looks better when they are next to each other. the image is actually a check mark next to it. i know this question has been asked a lot and i actually even asked it in the past, but i used the method in the other question i had but i still can't center this vertically. does anyone see where i went wrong? i was trying the background-position tag and the vertical middle tag, but neither worked?