Question

Fiddle: http://jsfiddle.net/pMZ5T/

HTML:

<div id="arrowcont">
    <img width="30px" height="30px" src="check.jpg" style="float:left;" />
    <div id="verticalcenter">Full Guide</div>
</div>
<br>
<br>

CSS:

#arrowcont {
    height: 40px;
    width: 275px;
    border: 1px solid black;
    vertical - align: middle;
    background - position: 0 50 % ;
}

#verticalcenter {
    vertical - align: middle;
    background - position: 0 50 % ;
}​

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?

Answer 1

This works: http://jsfiddle.net/GyVSt/

What I did:

1. Changed #arrowcont to display: table-cell (will allow vertical-align)
2. Removed float: left from img
3. Added display: inline-block for img and #verticalcenter (will put img and #verticalcenter next to each other)