admin管理员组

文章数量:1794759

08.css入门笔记

08.css入门笔记

文章目录

前言

一、vertical-align定义

二、vertical-align使用场景

三、语法

四、图片底部默认有空白缝隙问题

总结

前言

在页面布局的时候，我们经常会见到文字和图片是左右对齐或者文字环绕图片的这种形式。那边怎么样才能让文字和图片对齐呢？这个时候我们就需要用到vertical-align 属性了

一、vertical-align定义

用于设置一个元素的垂直对齐方式，但只针对行内元素或行内块元素

二、vertical-align使用场景

经常用于设置图片或表单和文字的垂直对齐方式

三、语法

vertical-align : baseline  / top/  middle  /bottom

baseline ：默认是和基线对齐

top: 顶部对齐

middle: 居中对齐

bottom: 底部对齐

四、图片底部默认有空白缝隙问题

bug：原因是行内块元素会和文字的基线对齐

解决办法两种：

  • 给图片添加vertical-align: top | middle | bottom 任意都可（提倡使用）
  • 给图片设置成块级元素，display:block;
    • 总结

    以上是今天分享的关于vertical-align相关的内容啦，祝大家元宵节快乐！

    本文标签： 入门笔记css

    版权声明：本文标题：08.css入门笔记 内容由林淑君副主任自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686973789a124228.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。