2012-08-13 128 views
0

这是我的jsfiddleCSS对齐图像旁边的链接

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

我试过直接向<a>标签添加一个类,然后调整边距。这没有用。

我试着直接向img标签添加一个类,然后调整边距。这没有用。

我试图再次调整填充而不是边距这些事情。

这是甚至可能的方式,我建立了,或者我将不得不改变html ..或两者?

任何建议,非常感谢!

+0

这里是一篇文章,如果IE给你一些麻烦 http://www.jakpsatweb.cz/css/css-vertical-center-solution.html – MimiEAM 2012-08-13 14:07:05

回答

3

我会像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

+0

谢谢!这工作。 – imakeitpretty 2012-08-13 14:01:53

+0

垂直对齐:中间整齐简单,为什么不使用它? – darma 2012-08-13 14:04:54

+0

我发现'vertical-align'属性对于某些浏览器非常有用,特别是对于IE。 – JSW189 2012-08-13 14:08:42

2

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

编辑:看到http://jsfiddle.net/Fn4vP/16/

+0

我认为vertical-align是一个弃用的元素。 – imakeitpretty 2012-08-13 13:50:09

+0

“align”作为一个属性被弃用是的,但不是所有的CSS属性! – darma 2012-08-13 13:55:37

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