css中左侧图右侧文字为什么不居中 - css - 方帮信


大厂面试直通卡 本周拉勾免费课:《深入浅出搞定React》 7月6号下线 【腾讯云】2021新春采购节,爆款产品特惠,助力企业上云
当前位置: 首页 >  > 技术 > 软件开发 > css

css中左侧图右侧文字为什么不居中

2021/5/24 22:36:11 浏览

css中左侧图右侧文字为什么不居中图片和文字在行内垂直方向默认是以基线(baseline)对齐的,图片基线在图片底部,而文字基线却在文字中点偏下的位置,所以才会显示成上图的样子。解决方式如下,使用两个垂直居中的属性便能够实现想要的效果:<html><body> &…

站长送干货喽:

1.拉勾教育7天VIP

2.大场面试题第一季-阿里篇视频讲解

站长的微信:changyandoublog

css中左侧图右侧文字为什么不居中


图片和文字在行内垂直方向默认是以基线(baseline)对齐的,图片基线在图片底部,而文字基线却在文字中点偏下的位置,所以才会显示成上图的样子。


解决方式如下,使用两个垂直居中的属性便能够实现想要的效果:


<html>
<body>
<div>
 <img src="G.png" style="vertical-align: middle;">  
 <span  style="vertical-align: middle;">
  asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfadfsasasdfasdasdf
 </span>

</div>
</body>
</html>


Reference

https://www.html.cn/qa/css3/15171.html


来源:方帮信(微信:changyandoublog,邮箱:changyandou@126.com),欢迎分享!

上一篇:toggleClass

下一篇:css中的&加横线