网页小图标和文字混排时如何对齐基准线

最近项目中使用到了在表格中显示文字前面附加一个icon

但是在html中，并列的图片和文字在页面显示的时候图片总是比文字靠上

此时需使用到了CSS vertical-align 属性 , 让文字和icon能在一条水平线上 .

实现效果：

img{/*vertical-align:text-top;  文字与图片对齐 */margin-bottom:-5px;/* 需要自己计算后对比效果 */
}

属性介绍

baseline 默认。元素放置在父元素的基线上。
sub 垂直对齐文本的下标。
super 垂直对齐文本的上标
top 把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐
middle 把此元素放置在父元素的中部。
bottom 把元素的顶端与行中最低的元素的顶端对齐。
text-bottom 把元素的底端与父元素字体的底端对齐。

当然我们属性的position和margin也是可以解决该问题的

另外转载图片和文字垂直居中-flex布局

//html
<view class="father"><image class="heart left" src="../../../image/like.png"></image><view class="text right">赞</view>
</view>//css
.father{/*设好宽高*/width:140rpx;height:70rpx;display: flex;/*水平方向元素居中，两边留白*/justify-content:center;/*垂直方向元素居中，两边留白*/align-items: center;
}
/*子元素就设好宽高*/

网页小图标和文字混排时如何对齐基准线相关推荐

图文混排时，图片和文字垂直如何居中
图文混排时,图片和文字垂直如何居中首先我们来说一说line-height和vertical:middle的区别 line-height:行高,可以使标签内部一行的内容进行垂直对齐 vertical: ...
html中英文混排,EndNote中英文混排时et al和等的3种解决方法 | 科研动力
EndNote对于英文文献的处理很出色,但是对于中文文献的处理就有点别扭,尤其是中英文文献混排时更是不爽.木有关系,EndNote的强大这处之一就是可以驯服和调教.下面介绍3种如何处理中英文混排时et ...
『精品素材』20套免费的网页小图标素材下载
在网页设计工作中,图标设计是最耗时的任务之一,但幸运的是网络上有很多慷慨的设计师分享的现成的免费小图标素材包可以下载使用.下面这个列表收集了20套免费的网页小图标,记得分享和推荐啊. Free 16p ...
如何用ae插件Typemonkey 实现文字混排效果
最近一段时间也是因为短视频的流行重新带火了一种文字混排脚本,这个脚本Typemonkey 估计也是某位大佬所作下载地址: https://www.lanzous.com/i40xsid 安装教程: ...
设计透明背景的ICON（网页小图标）
Designo总会有不同成图的洁癖,只是需要纯粹的图案. 而在网页设计和App设计的时候,会用到透明背景的logo或者是icon之类的.上述的icon出现在网页设计中就是"网页小图标 ...
iOS-富文本之表情文字混排
场景:如微信一样,可以发送emoji表情,以及emoji表情与文字混排. 主要实现依据类: 1.NSMutableAttributedString 将文本转化成NSMutableAttributedS ...
75个像素网页小图标素材
内容提要:75个像素网页小图标素材,75个像素网页小图标素材,包括:心,箭头,用户,手,搜索,电话图标,声音图标,对号,箭头... 75个像素网页小图标素材,包括:心,箭头,用户,手,搜索,电话图标, ...
EndNote中英文混排时et al和等的3种解决方法
EndNote对于英文文献的处理很出色,但是对于中文文献的处理就有点别扭,尤其是中英文文献混排时更是不爽.木有关系,EndNote的强大这处之一就是可以驯服和调教.下面介绍3种如何处理中英文混排时et ...
EndNote中英文混排时et al和等的解决方法
EndNote对于英文文献的处理很出色,但是对于中文文献的处理就有点别扭,尤其是中英文文献混排时更是不爽.木有关系,EndNote的强大这处之一就是可以驯服和调教.下面介绍3种如何处理中英文混排时et ...

网页小图标和文字混排时如何对齐基准线

网页小图标和文字混排时如何对齐基准线相关推荐

最新文章

热门文章