【问题标题】:Aligning images and text vertically inside div在 div 内垂直对齐图像和文本
【发布时间】:2012-06-24 20:57:05
【问题描述】:

在 div 中垂直对齐图像和文本的唯一方法是通过绝对/相对定位吗?

我需要这样做,并且我正在尝试使用尽可能少的类/hacks。

是唯一的其他方法,例如 display:table-cell;垂直对齐:中间;?

示例代码:

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

【问题讨论】:

标签: html css positioning vertical-alignment


【解决方案1】:

一种方法是使用 display: table-cellvertical-align: middle

看一个例子:

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

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

【讨论】:

  • 是的,我在 google/so 搜索解决方案时看到了这种方法,但我的主要问题(不关心 ie7)是元素被分组为一个,所以如果它是图标文本图标,它们会像在您的 jsfiddle 中一样出现锯齿状。
  • 所以改写 - 我希望每个单独的图像/文本在容器 div 中居中,所以图像/文本看起来很好。我知道这可以通过相对/绝对定位轻松完成,当这应该以更简单的方式处理时(在我看来),不得不创建这么多额外的 css hack,这很烦人
【解决方案2】:

发表在上面的评论中,但此代码适用于任何有兴趣的人 --->

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

【讨论】:

    【解决方案3】:

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

    在我看来,使用垂直对齐添加到您的 css 是最聪明的方法。

    .test
    vertical-align: middle;
    

    【讨论】:

      【解决方案4】:

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

      【讨论】:

        猜你喜欢
        • 2023-04-04
        • 2012-03-05
        • 2011-07-22
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2019-07-14
        • 2011-11-16
        • 1970-01-01
        相关资源
        最近更新 更多