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

日期: 标签:CSSWeb故障排除网页设计
如需帮忙改代码,或者WordPress二次开发、PHP网站建设等需求,可联系我购买付费服务:  点此联系我

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

文字和图片没有对齐

 

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

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

文字和图片对齐了

本文转载自: DIV+CSS解决图片文字对齐的问题
版权归原作者所有!

-- 完 --

本文采用 「CC BY-NC-SA 4.0」创作共享协议,转载请标注以下信息:
原文出处:露兜即刻 https://www.ludou.org/pic-text-alignment.html
露兜
kaapass@outlook.com  QQ 825533758

业余编程爱好者。

6 条留言

点此留言
  1. 海龟来了 海龟来了

    解决咯、谢谢1

  2. ludou

    不客气!

  3. Matthew Matthew

    个人习惯用vertical-align:middle;呵呵。

  4. happyup

    博主,你好:
      我想问个问题,发表post时,在html装态下,插入HTML Code 后,转成visual时会显示一个图片,(HTML Code是营销链接),这个图片默认的状态下在左侧,我想让它移到右上角,怎么能呢,我点右对齐,但是保存以后它自动又回到左边了。怎么办呢?
      还有一个问题,能不能让post和page页不显示右侧的工具栏,而只让主页显示工具栏呢?
           谢谢!

    • Ludou

      @happyup 给img添加style="float:right;"
      <img style="float:right;" src="" alt="" />

      不显示右侧的工具栏,比较复杂,需要修改主题代码。

  5. aftersong

    十分简单粗暴的解决问题

发表留言