Icon和文本对齐方式的探索

在Web中很多场景中都会使用到Icon,那么就会面临Icon和文本对齐的处理。而这个对齐效果的处理又不是一件轻易的事情,特别是面又众多不同移动终端的情形之下。那么今天这篇文章就来和大家一起探讨一下这方面的话题。

Web中的图标

这里所说的Web中的图标是指Web中的Icon图标。从《Web中的图标》一文中,我们可以得知,到目前为止,在Web中使用图标的方式主要有:

  • 通过img标签加载Icon图标
  • 使用svg内联标签,加载矢量Icon图标
  • 通过Icon Fonts来加载Icon图标

不管是哪一种方式,都有各自的利弊,至于怎么选择,可以阅读《Web中的图标》一文。在这里,我们主要来探讨的是图标和文本的对齐姿势

Web中引用图标的姿势

在Web应用程序或者Web页面中,引用Icon图标,常见的方式主要有:

<elem>
    <img src="...">文本
</elem>

<elem>
    文本<img src="...">
</elem>

<elem>
    <svg></svg>文本
</elem>

<elem>
    文本<svg></svg>
</elem>

<elem>
    <iconfont></iconfont>文本
</elem>

<elem>
    文本<iconfont></iconfont>
</elem>

但在很多情况之下,为了更好的让Icon图标和文本能对齐(垂直对齐),大部分同学喜欢用一个行内元素,比如<span>把文本包裹起来,就像下面这样:

<elem>
    <img src="..."><span>文本</span>
</elem>

而实际中,有些场景是无法让我们人肉的给文本内容添加类似<span>这样的标签,特别是在CMS系统中的操作,或者说通过JavaScript动态插入内容。

对于如何使用CSS让Icon图标和文本能够垂直对齐,我想大家脑海中第一浮现的属性是 vertical-align 。那么,是否使用该属性就真的能让Icon图标和文本能完美的实现垂直居中呢?希望大家带着这样的一个问题继续往下阅读。

浏览器的默认行为

首先来看看浏览器的默认行为。先来看两种情形:

<elem>
    <img />case
</elem>

<elem>
    <img /><span>case</span> 
</elem>

为了让样子好看一点,添加一点基本样式:

body {
    padding: 2vw;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue",
    "PingFang SC", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC",
    "WenQuanYi Micro Hei", sans-serif;
    font-size: 14px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}
svg,img {
    width: .85em;
}

.fas {
    font-size: 170px;
}

在你的浏览器下看到的效果如下:

接下来稍稍改变一下,让浏览器自行让Icon和文本垂直对齐。到目前为止,主流的有两种方式:

  • inline-flexalign-items
  • inline-blockvertical-align

前者采用的是CSS Flexbox的模式,后者是较为传统的垂直对齐模式。一般情况之下,inline-flexalign-items运用于:

<elem>
    <img />case
</elem>

即: 文本没有额外的HTML标签包裹 !而inline-blockvertical-align一般用于:

<elem>
    <img /><span>case</span>
</elem>

事实上,inline-flex也可以运用于后者的结构中。

特别声明,示例代码中的<img />标签可以是<svg>或者<iconfont>,其中<span>

剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/css/icon-align-to-text.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部