margin-bottom解决图片文字不对齐的问题

来自:互联网
时间:2019-07-29
阅读:
免费资源网 - https://freexyz.cn/

我们在做网页的时候,会遇到一个图片和文字位置对不齐的问题。(一般表现为图片总是比文字高点),如下图,"我的联系方式"是文字,后面的emAIl是图片:

文字和图片没有对齐

解决这个问题最好的办法:

一个关键的属性: margin-bottom 通过修改图片的外边框的底部高度就可以让文字移动上来,做法是把这个值设置为负数。例如我们高度为22像素的图片设置它的style="margin-bottom: -4px" 这样文字和图片就居中了。这个值随着图片的大小不同而改变,具体的大家测试一下就知道了。下面是我更改后的效果:

文字和图片对齐了

免费资源网 - https://freexyz.cn/
返回顶部
顶部