Align text vertically inside an anchor

Question

I have this part of HTML:

<a href="href" class="my-a-class> <img alt="alt" src="/path/to/image.jpg" class="my-img-class" />&nbsp;My text </a> 

I need to vertically align My Text without affecting the image in the anchor. I cannot add an HTML tag, I only need to do this with CSS. Any suggestion?

Answer 1

You can do this using .my-a-class { line-height: value } . Replace value with image height.

Edit ---

These days it's much better to use flexbox for this:

 .my-a-class { display: flex; align-items: center; justify-content: space-between; } 

Answer 2

Align the image with the text:

 .my-a-class img { vertical-align: middle; } 

Demo: http://jsfiddle.net/Guffa/hz6AV/

Answer 3

Set for a img{vertical-align:middle;} or .my-img-class{vertical-align:middle;} It should work.

Answer 4

Try this code:

 a { position:relative; height:11em; } a img{ position: absolute: top:0; bottom:0; margin-top:auto; margin-bottom:auto; } 

or

 .my-a-class { position:relative; height:11em; } .my-a-class .my-img-class{ position: absolute: top:0; bottom:0; margin-top:auto; margin-bottom:auto; } 

Answer 5

The correct way to align images and icons with anchored tags

In your css

 a { background: transparent url(/images/your_image) scroll no-repeat left center; padding: 2px 0px 2px 20px; //fit as you need } 

In your HTML

 <a href="url">Text</a>