html中字体在上下边缘居中,图片与文字在一行上垂直居中的方法

33c6ee5f447d6234f4211ca4fc137a57.png

不知大家在做网站的时候有没有遇到这样的情况:在一行上会插入一个小图标,然后在图标后面配上文字说明,可是发现往往图片和文字并不垂直居中,在一行上图片老是相对文字要偏上一些,显的很不好看,那么有没有办法使图片与文字在一行上垂直居中呢?试了很多方法都不太理想,最终找到了一种简单有效的方法,拿来分享。

其实只需要设置图片的align属性为absmiddle即可,相关代码请看下面:欢迎光临HTMer.Com

经过上面的设置后图片和文字就能在一行上保持垂直居中了,当然还有其他方法可以实现同样的效果,大家可以留言分享。

小知识:其实img标签的align属性还有其他成员,下面列举出来供大家参考备用:

成员名称       说明

AbsBottom  图像的下边缘与同一行中最大元素的下边缘对齐。

AbsMiddle   图像的中间与同一行中最大元素的中间对齐。

Baseline     图像的下边缘与第一行文本的下边缘对齐。

Bottom        图像的下边缘与第一行文本的下边缘对齐。

Left              图像沿网页的左边缘对齐,文字在图像右边换行。

Middle         图像的中间与第一行文本的下边缘对齐。

NotSet         未设定对齐方式。

Right        图像沿网页的右边缘对齐,文字在图像左边换行。

TextTop   图像的上边缘与同一行上最高文本的上边缘对齐。

Top          图像的上边缘与同一行上最高元素的上边缘对齐。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值