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相关的内容啦，祝大家元宵节快乐！