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!

回答1:

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

回答2:

You can set vertical-align:middle both on the <a> and <img> you wish to align.

Edit : see http://jsfiddle.net/Fn4vP/16/

回答3:

I would use line-height, Basically, float your image left, float the link left and then clear the floats on the next <h3> tag. Change this part to the following:

<!-- Dont forget to close your image tag.  -->
<img src="http://i46.tinypic.com/2ly6hc4.png" width="24px" height="19px"/>
<a href="#" class="flw-link"> Follow Us</a>
<!-- Added class .flw-link to Follow us link -->

Now in your CSS:

/* Float the image and link to the left */
.twitter-feed img{float: left;}
/* Set the line-height of the text to center vertically to the image */
.twitter-feed .flw-link{float: left; line-height: 21px;}
/* Finally, clear your floats on the next tweet header */
.twitter-feed h3{clear: both;}

Check out this jsfiddle: http://jsfiddle.net/Fn4vP/25/

I would do it like this and float both elements, because I have to option to change the line-height to 0 which will position the text right at the top. You can then use the line-height to have pixel control over exactly where the text is positioned vertically.

来源：https://stackoverflow.com/questions/11935565/css-alignment-of-a-link-next-to-an-image