- This topic is empty.
September 18, 2013 at 7:24 pm #150521cybershotParticipant
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 timeSeptember 18, 2013 at 11:58 pm #150536September 19, 2013 at 1:47 am #150540Paulie_DMember
I wouldn’t even put the image inside the link.
Make it a bg image and centering is easy.September 19, 2013 at 3:39 am #150563sadunareshParticipant
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?September 19, 2013 at 3:52 am #150568Paulie_DMember
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.September 19, 2013 at 5:32 pm #150648cybershotParticipant
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.
- The forum ‘CSS’ is closed to new topics and replies.