在div内垂直对齐图像和文本

时间:2012-06-21 21:40:38

标签: html css positioning vertical-alignment

是否可以通过绝对/相对定位在div内垂直对齐图像和文本?

我需要这样做,而我正试图尽可能少地使用课程/黑客。

唯一的另一种方法就是显示:table-cell;垂直对齐:中部;

示例代码:

http://jsfiddle.net/ndreckshage/UYxXG/

4 个答案:

答案 0 :(得分:2)

执行此操作的一种方法是将 display:table-cell vertical-align:middle 一起使用。

查看示例:

http://jsfiddle.net/UYxXG/3/

此方法的一个问题是,IE7不支持属性“table-cell”。

答案 1 :(得分:1)

在评论中发布,但此代码适用于任何感兴趣的人--->

http://jsfiddle.net/ndreckshage/7SV9f/

答案 2 :(得分:0)

垂直对齐是单向,绝对/相对定位是另一种方式,但也有html对齐属性。 http://www.w3schools.com/html/tryit.asp?filename=tryhtml_image_align

在我看来,使用vertical-align添加到css是最明智的方法。

.test
vertical-align: middle;

答案 3 :(得分:0)

Chris Coyier有一篇关于CSS Tricks的精彩文章,展示了如何使用css垂直居中单行和多行文本。 http://css-tricks.com/vertically-center-multi-lined-text/