这是我的jsfiddle。
“关注我们”链接位于推特图标旁边。我想要的是使用css
使链接在图像上垂直居中,如果可能的话没有内联样式。
我已尝试将类直接添加到<a>
标记,然后调整边距。那没用。
我尝试将一个类直接添加到img
标记,然后调整边距。那没用。
我尝试再次调整填充而不是边距。
这可能是我设置的方式,还是我必须更改html
..或两者兼而有之?
任何建议都非常感谢!
答案 0 :(得分:4)
您可以在要对齐的vertical-align:middle
和<a>
上设置<img>
。
答案 1 :(得分:3)
我会float
左边的图像,然后将line-height
标记的a
更改为等同于图像的高度(在本例中为19px)。要仅将行高定位到“关注我们”周围的锚点,只需将类添加到锚点.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; }
答案 2 :(得分:0)
我会使用line-height
,基本上,向左浮动图像,向左浮动链接,然后清除下一个<h3>
标记上的浮动。
将此部分更改为以下内容:
<!-- 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 -->
现在在你的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;}
查看这个jsfiddle:http://jsfiddle.net/Fn4vP/25/
我会像这样做并浮动两个元素,因为我必须选择将行高更改为0
,这会将文本放在顶部。然后,您可以使用行高来精确控制文本垂直放置的位置。