vertical-align 属性应用

vertical-align 用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。

CSS 的 vertical-align 属性使用场景：经常用于设置图片或者表单(行内块元素）和文字垂直对齐。

语法：

vertical-align : baseline | top | middle | bottom

值	描述
baseline	默认。元素放置在父元素的基线上。
top	把元素的顶端与行中最高元素的顶端对齐。
middle	把此元素放置在父元素的中部。
bottom	把元素的顶端与行中最低的元素的顶端对齐。

图片、表单和文字对齐

图片、表单都属于行内块元素，默认的 vertical-align 是基线对齐。

解决图片底部默认空白缝隙问题

bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。

主要解决方法有两种：

1.给图片添加 vertical-align:middle | top| bottom 等。（提倡使用的）

2.把图片转换为块级元素 display: block;

CSS第七天学习总结—— vertical-align 属性应用相关推荐

CSS第七天学习总结—— 字体图标
字体图标字体图标使用场景: 主要用于显示网页中通用.常用的一些小图标. 一般用<i>标签来写字体图标. 精灵图的缺点: 1.图片文件还是比较大的. 2.图片本身放大和缩小会失真. 3.一 ...
Pink老师前端笔记-CSS第七天
Pink老师前端笔记-CSS第六天 # day09-前端基础CSS第七天学习目标: 能够使用精灵图能够使用字体图标能够写出 CSS 三角能够写出常见的 CSS 用户界面样式 ...
七天学习微信小程序开发（一）—— 学习笔记
文章目录前言目标第一天 -- 前端配置和编写微信开发微信小程序的代码结构常用标签(wxml) 常用样式(wxss) 界面布局的技术任务第二天 -- 深度学习微信前端编写(一) 程序底部 ...
2014025687《嵌入式系统程序设计》第七周学习总结
学号2014025687(29) <嵌入式程序设计>第七周学习总结教材学习内容总结 8.2.5 有名管道FIFO 也叫FIFO(先进先出) 与无名管道的区别:它可以使互不相关的两个进程实 ...
20155319 2016-2017-2 《Java程序设计》第七周学习总结
20155319 2016-2017-2 <Java程序设计>第七周学习总结教材学习内容总结第十二章 Lambda 如果使用JDK8的话,可以使用Lambda特性去除重复的信息. 在只 ...
大学最重要的七项学习
大学最重要的七项学习 ------我的大学生活应该怎样度过? 就读大学时,你应当掌握七项学习,包括自修之道.基础知识.实践贯通.培养兴趣.积极主动.掌控时间.为人处世. 经过大学四年,你 ...
20159208 《网络攻防实践》第七周学习总结
20159208 <网络攻防实践>第七周学习总结教材学习内容总结 20159208 <网络攻防实践>第七周学习总结教材学习内容总结本周主要学习了教材的第七章:Window ...
20172301 《程序设计与数据结构》第七周学习总结
20172301 <程序设计与数据结构>第七周学习总结教材学习内容总结二叉查找树是一种含有附加属性的二叉树,其左孩子小于父结点,父结点小于或者等于右孩子. 用链表实现二叉查找树 add ...
20155213 2016-2017-2 《Java程序设计》第七周学习总结
20155213 2016-2017-2 <Java程序设计>第七周学习总结教材学习内容总结 Lambda 如果使用JDK8的话,可以使用Lambda特性去除重复的信息. 在只有Lamb ...

CSS第七天学习总结—— vertical-align 属性应用

vertical-align 属性应用

图片、表单和文字对齐

解决图片底部默认空白缝隙问题

CSS第七天学习总结—— vertical-align 属性应用相关推荐

最新文章

热门文章