这是我的jsfiddle。
“关注我们”链接位于推特图标旁边。我想要的是css如果可能的话，使用不使用内联样式的链接垂直居中在图像上。
我尝试直接向<a>标签添加一个类，然后调整边距。那没有用。
我尝试直接向img标签添加一个类，然后调整边距。那没有用。
我再次尝试做这两件事来调整填充而不是边距。
这甚至可能是我设置它的方式还是我必须改变html..或两者兼而有之？
任何建议都非常感谢！
问问题
17141 次
3 回答
5
您可以vertical-align:middle同时设置<a>和<img>您希望对齐。
于 2012-08-13T13:49:12.000 回答
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; }
于 2012-08-13T13:49:40.140 回答
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将文本放置在顶部的行高。然后，您可以使用 line-height 对文本垂直放置的确切位置进行像素控制。
于 2012-08-13T14:03:52.783 回答