这是我的jsfiddle。CSS对齐图像旁边的链接
链接“关注我们”位于Twitter图标旁边。我想要的是链接在图像上垂直居中使用css
如果可能,不带内联样式。
我试过直接向<a>
标签添加一个类,然后调整边距。这没有用。
我试着直接向img
标签添加一个类,然后调整边距。这没有用。
我试图再次调整填充而不是边距这些事情。
这是甚至可能的方式,我建立了,或者我将不得不改变html
..或两者?
任何建议,非常感谢!
这是我的jsfiddle。CSS对齐图像旁边的链接
链接“关注我们”位于Twitter图标旁边。我想要的是链接在图像上垂直居中使用css
如果可能,不带内联样式。
我试过直接向<a>
标签添加一个类,然后调整边距。这没有用。
我试着直接向img
标签添加一个类,然后调整边距。这没有用。
我试图再次调整填充而不是边距这些事情。
这是甚至可能的方式,我建立了,或者我将不得不改变html
..或两者?
任何建议,非常感谢!
我会像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; }
谢谢!这工作。 – imakeitpretty 2012-08-13 14:01:53
垂直对齐:中间整齐简单,为什么不使用它? – darma 2012-08-13 14:04:54
我发现'vertical-align'属性对于某些浏览器非常有用,特别是对于IE。 – JSW189 2012-08-13 14:08:42
您可以在想要对齐的<a>
和<img>
上设置vertical-align:middle
。
我认为vertical-align是一个弃用的元素。 – imakeitpretty 2012-08-13 13:50:09
“align”作为一个属性被弃用是的,但不是所有的CSS属性! – darma 2012-08-13 13:55:37
我会用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
,这会将文本置于顶部。然后,您可以使用行高来精确控制文本垂直放置的位置。
这里是一篇文章,如果IE给你一些麻烦 http://www.jakpsatweb.cz/css/css-vertical-center-solution.html – MimiEAM 2012-08-13 14:07:05