• 技术文章 >web前端 >前端问答

    css 文字和图片对不齐怎么办

    藏色散人藏色散人2023-01-28 11:13:33原创46

    css文字和图片对不齐的解决办法:1、打开相应的HTML文件;2、找到文字和图片标签部分;3、给图片添加一条属性为“img {width: 20px;vertical-align: middle;}”即可使文字和图片对齐。

    本教程操作环境:Windows10系统、HTML5&&CSS3版、DELL G3电脑

    css 文字和图片对不齐怎么办?

    css解决文字和图片不在一条水平线上

    通常情况下图片是默认顶部对齐,而文字则是默认底部对齐的,所以我们在布局时经常会遇到图片和文字不能对齐的问题。

    3fe39a1542bbb3c9acaf4c905e1138d.jpg

    解决方法很简单我们只需要给图片添加一条属性即可

    img {
      width         : 20px;
      vertical-align: middle;
    }
     
    vertical-align: text-top;    //顶部对齐
    vertical-align: middle;      //居中对齐
    vertical-align: text-bottom; //底部对齐

    推荐学习:《css视频教程

    以上就是css 文字和图片对不齐怎么办的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:css
    上一篇:html5怎么实现放大镜功能 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • Vue3学习之深度剖析CSS Modules和Scope• 手把手教你用CSS实现简单大气的输入框• CSS高阶技巧:实现图片渐隐消的多种方法• html/css中的tt是什么• 让交互更加生动!巧用CSS实现鼠标跟随 3D 旋转效果
    1/1

    PHP中文网