Question

I have an image in side the div, and an hyperlink next to it. The problem is that the hyperlink is being displayed at the bottom level of the image. I want to display it in the center of the image.

HTML:

<div class="main">
<img class="image" src="http://aux.iconpedia.net/uploads/16149178162137949115.png" alt="smiley" />
<a class="link" href="#">move it up in the center to the smiley</a>
</div>

CSS:

.main{
    border:1px solid red;
}

.image{
    border:1px solid green;
}
.link{
    /*height:30px;*/
}

JSFiddle:

http://jsfiddle.net/cTRsY/

Answer 1

.image {
 vertical-align:middle    
}