CSS图像旁边链接的对齐方式 [英] CSS Alignment of a link next to an image
问题描述
这是我的 jsfiddle 。
关注我们的链接位于Twitter图标旁边。我想要的是链接垂直居中的图像使用 css
没有内联样式,如果可能的话。
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.
我试着直接添加一个类到< a>
标签,然后调整边距。这不行。
I've tried adding a class directly to the <a>
tag and then adjusting the margin. That did not work.
我尝试直接添加一个类到 img
标签,然后调整边距。这没有工作。
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.
我如何设置或者我必须改变 html
..或两者?
Is this even possible the way I have it set up or am I going to have to change the html
..or both?
任何建议都非常感谢!
推荐答案
我会 float
左侧,然后将 a
标签的 line-height
更改为等价于图像的高度这种情况下,19px)。要将行高仅定位到跟随我们周围的定位点,只需向定位点添加类,如 .follow
。
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
HTML
<img src="imageURL.png" width="24px" height="19px">
<a href="#" class="follow"> Follow Us</a>
CSS
img { float: left; }
.follow { line-height: 19px; }
这篇关于CSS图像旁边链接的对齐方式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!