【问题标题】:Vertical align of text in CSSCSS中文本的垂直对齐
【发布时间】:2014-04-13 18:45:01
【问题描述】:

我正在尝试将 Fontawsome 图标 (http://fortawesome.github.io/Font-Awesome/) 与旁边的一些文本对齐。在这种情况下,一个电话号码旁边是一个 - 你猜对了 - 电话图标。

HTML

<p>
    <i class="fa fa-3x fa-phone-square"></i>
    <span class="phone">111 222 333</span>
</p>

CSS

.phone {
    font-size: 1.5em;
    vertical-align: middle;
}

http://jsfiddle.net/ypLN5/

我尝试了几种使用 line-height 和 vertical-align: middle 的方法,但我还没有找到解决方案。

你能帮忙吗?

【问题讨论】:

    标签: html css vertical-alignment


    【解决方案1】:

    SW4 的答案是正确的。

    尽管如果您希望使用 display: table-cell 将更大的元素居中并解决您的问题:

    http://jsfiddle.net/3U2Vj/1/

    【讨论】:

    • 感谢您的提示。我会调查的。
    【解决方案2】:

    有一种非常简单的方法:

    i, span{
        vertical-align:middle;
    }
    

    Demo fiddle

    【讨论】:

    • 简单易用,+1。不过,值得一提的是,如果跨度的内容超出其计算宽度,它将换行并进入电话图标下方。为防止这种情况,您可以为&lt;span&gt; 设置固定宽度。
    猜你喜欢
    • 1970-01-01
    • 2013-05-25
    • 2017-04-16
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-01-17
    • 2013-09-04
    相关资源
    最近更新 更多