【问题标题】:Center text inside font icon在字体图标内居中文本
【发布时间】:2014-06-12 18:39:12
【问题描述】:

我有一个字体图标,它位于某些文本的正下方。我希望文本位于图标的中间(内部)。如果我使用诸如填充之类的措施来推送文本,那将是一个糟糕的解决方案,因为文本可能会根据大小和周围的其他元素而移动。

http://jsfiddle.net/gkAFD/

HTML:

<i class="fi-cloud"></i>
<span>Text</span>

CSS:

i {
  font-size: 63px;
}

span {
  color: red;
}

【问题讨论】:

    标签: html css twitter-bootstrap zurb-foundation


    【解决方案1】:

    您需要将display: inlinevertical-align:middle 添加到您的图标。

    i {
        font-size: 63px;
        display: inline;
        vertical-align: middle;
    }
    

    Updated fiddle

    【讨论】:

    • 实际上我希望它在云内部而不是在它旁边居中。
    • 我认为这不可能,因为这两个元素都是内联的。我能得到的最接近的 -> jsfiddle.net/gkAFD/7
    【解决方案2】:
    i {
        font-size: 63px;
        vertical-align: middle;
    }
    
    span {
        color: red;
        margin-left: -45px;
    }
    

    JSFIDDLE

    【讨论】:

    • 请更新小提琴,以便我看到它。但是,我希望文本就在云中。
    • 这正是我想要避免的。我可以用边距或填充来定位它,但这不会很灵活......
    • @user3704920,你可以和position: absolute;一起玩。像这样 - jsfiddle.net/gkAFD/4
    • 垂直对齐并没有真正在那里做任何事情,并且文本没有居中。这是一个艰难的过程。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2015-06-01
    • 2018-01-22
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-12-12
    • 2013-06-22
    相关资源
    最近更新 更多