Search code examples
htmlcsshtml5boilerplate

CSS Alignment of a link next to an image


This is my jsfiddle.

The link "follow us" is next to the twitter icon. What I want is for the link to be vertically centered on the image using css without inline styles if possible.

I've tried adding a class directly to the <a> tag and then adjusting the margin. That did not work.

I tried adding a class directly to the img tag and then adjusting the margin. That did not work.

I tried doing both of these things again adjusting the padding instead of the margin.

Is this even possible the way I have it set up or am I going to have to change the html..or both?

Any suggestions are highly appreciated!


Solution

  • I would float the image to the left, then change the line-height of the a tag to be equivalent to the height of the image (in this case, 19px). To target the line height only to the anchor surrounding "Follow Us," just add a class to the anchor like .follow.

    HTML

    <img src="imageURL.png" width="24px" height="19px">
    <a href="#" class="follow"> Follow Us</a>
    

    CSS

    img { float: left; }
    .follow { line-height: 19px; }
    

    JS Fiddle Example