图像旁边链接的 CSS 对齐方式答案

【问题标题】：CSS Alignment of a link next to an image图像旁边链接的 CSS 对齐方式
【发布时间】：2012-08-13 13:45:11
【问题描述】：

这是我的jsfiddle。

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

我尝试直接向<a> 标签添加一个类，然后调整边距。那没用。

我尝试直接向img 标签添加一个类，然后调整边距。那没有用。

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

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

非常感谢任何建议！

【问题讨论】：

这里有一篇文章以防IE给你带来麻烦jakpsatweb.cz/css/css-vertical-center-solution.html

标签： html css html5boilerplate

【解决方案1】：

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

编辑：见http://jsfiddle.net/Fn4vP/16/

【讨论】：

我认为 vertical-align 是一个不推荐使用的元素。
"align" 作为属性已被弃用，是的，但根本不是 CSS 属性！

【解决方案2】：

我会将float 图像移到左侧，然后将a 标记的line-height 更改为等于图像的高度（在本例中为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

【讨论】：

好吧，vertical-align:middle 更简洁，为什么不用呢？
我发现vertical-align属性对于某些浏览器来说非常适合，尤其是对于IE。
@JSW189 ：你在哪里“找到”了那个？如果在正确的情况下使用它会非常有效，这就是这种情况（像 img、a 等的内联元素垂直对齐）。
@darma 我通过我自己对房产的体验“发现”了这一点。但我可能错了。随时通过显示浏览器兼容性图表来证明我错了。
另外，为什么我的回答被否决了？我不认为这是一个“极其草率、不费吹灰之力的帖子，也不是一个明显不正确且可能非常不正确的答案。”

【解决方案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，这会将文本定位在顶部。然后，您可以使用 line-height 对文本垂直放置的确切位置进行像素控制。

【讨论】：