[Solved] vertical align image in link

[cybershot]

My skills are getting weak. To much time developing and not front end coding. I am trying to vertically align a header image and I am having trouble. I have the image in the anchor tag for a typical header image. My header is 100px high and I want the page to center the image without having to use px to exactly position it. Usually I use vertical-align: middle for this but I can’t get it to work.

<a href="#"><img src="header.jpg" alt="my site" width="50" height="50" /></a>

So then i made the anchor tag like so

display: block;
    height: 100px;
    line-height: 100px;
    vertical-align: middle;

Usually that does the trick for centering things vertically but I can’t get it to work this time

http://www.themebuddies.com/sites/bakery-nonresponsive/

[sadunaresh]

see it here

[Paulie_D]

I wouldn’t even put the image inside the link.

Make it a bg image and centering is easy.

http://codepen.io/Paulie-D/pen/lnfiz

[sadunaresh]

@paulie,

that is an easy alternative to achieve the task..

but, I think(I’m not sure), in case of logos, an Inline image is preferred for better SEO and accessibility… isn’t it?

[Paulie_D]

I think(I’m not sure), in case of logos, an Inline image is preferred for better SEO and accessibility… isn’t it?

For accessibility, the screen reader will read whatever text is in the link (e.g. “Home Page – Link”)…isn’t that more accessible that an image with an alt of “logo”.

SEO, again, I don’t know but I doubt it would be any better or worse than a link.

In fact, in reading Chris Coyier’s article (https://css-tricks.com/css-image-replacement/)…it looks like the preferred solution.

[cybershot]

table-cell worked and I did like your idea Paulie_D. I will have to remember that for the next time. I am putting the image in the link because this will be a template and I will want to change the image with php and it’s much easier to do that if the image code is in the markup.

[Author]

Posts