Question

这是我的jsfiddle。

“关注我们”链接位于推特图标旁边。我想要的是使用css使链接在图像上垂直居中，如果可能的话没有内联样式。

我已尝试将类直接添加到<a>标记，然后调整边距。那没用。

我尝试将一个类直接添加到img标记，然后调整边距。那没用。

我尝试再次调整填充而不是边距。

这可能是我设置的方式，还是我必须更改html ..或两者兼而有之？

任何建议都非常感谢！

Answer 1

您可以在要对齐的vertical-align:middle和<a>上设置<img>。

修改：请参阅http://jsfiddle.net/Fn4vP/16/

Answer 2

我会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; }

JS Fiddle Example

Answer 3

我会使用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，这会将文本放在顶部。然后，您可以使用行高来精确控制文本垂直放置的位置。

CSS对齐图像旁边的链接

3 个答案: