css属性之vertical-align

## vertical-align用来指定行内元素（inline）或表格单元格（table-cell）以及图片的垂直对齐方式。对于块级元素，vertical-align是不起作用的。

vertical-align的值可以归为以下4类：

属性	属性值
线类	如 baseline、top、middle、bottom
文本类	如 text-top、text-bottom
上标下标类	如 sub、super
数值百分比类	如 px、em、%等

vertical-align 理解`
给一个元素（子元素）设定 vertical-align 时，浏览器产生的动作是：

根据该值去 VA-table 中查找子元素对齐点和父元素对齐点这两个隐式参数值。父元素不动，移动子元素，让子元素对齐点向父元素对齐点对齐。

确定子元素此时所处的 linebox 是哪个。确定父元素在这个 linebox 中的上边缘(linebox top)确定子元素自身的 inlinebox top 。

调整子元素的上下位置，让子元素的 inlinebox top 对准父元素的 linebox top 。

当我们将这种 inline 元素塞到 linebox 里头时，的对齐点实际上只有三个。

子元素的 inlinebox top, 即是其上边缘。

子元素的 inlinebox bottom 和 baseline 即是其下边缘。子元素的 middle 对应着图片垂直方向的中心点。

这是基于文本中线取值middle

  <div class="block">xHgfsdsdfadsfggfdghfdhtsrhts <span>123</span> <img src="img_11.jpg" alt="" srcset=""></div><style>.block {height: 500px;width: 500px;border: 1px solid #ddd;font-size: 60px;}span {font-size: 25px;background-color: #ddd;vertical-align: middle;}img{height: 150px;width: 150px;vertical-align:middle;}</style>

这是基于文本顶线取值top

  <div class="block">fsdsdfas <span>123</span> <img src="img_11.jpg" alt="" srcset=""></div><style>.block {height: 500px;width: 500px;border: 1px solid #ddd;font-size: 60px;}span {font-size: 25px;background-color: #ddd;}img{height: 150px;width: 150px;vertical-align:top;}</style>

这是基于文本底线取值bottom

  <div class="block">fsdsdfas <span>123</span> <img src="img_11.jpg" alt="" srcset=""></div><style>.block {height: 500px;width: 500px;border: 1px solid #ddd;font-size: 60px;}span {font-size: 25px;background-color: #ddd;}img{height: 150px;width: 150px;vertical-align:bottom;}</style>

css属性之vertical-align相关推荐

DW中CSS属性详解
作者:未知来源:5D多媒体在Dreamweaver的CSS样式里包含了W3C规范定义的所有CSS1的属性,Dreamweaver把这些属性分为Type(类型).Background(背 ...
css不换行属性_那些不常见，但却非常实用的css属性(整理不易)
1.-webkit-line-clamp 可以把块容器中的内容限制为指定的行数.并且在超过行数后,在最后一行显示"..." 这是正常的展示 display: -webkit-b ...
css不换行属性_那些不常见，但却非常实用的 css 属性
作者:寒水寺一禅人类身份验证 - SegmentFaultsegmentfault.com 1.-webkit-line-clamp 可以把块容器中的内容限制为指定的行数.并且在超过行数后,在 ...
HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
td外边加div为啥不隐藏_那些不常见，但却非常实用的 css 属性
(给前端大全加星标,提升前端技能) 作者:寒水寺一禅 https://segmentfault.com/a/1190000022851543 1.-webkit-line-clamp 可以把块容器 ...
CSS属性以及属性值（样式）
前面讲解了CSS的各种规定,具体能应用到哪些方面呢? (一)文字排版 1.字体我们可以使用css样式为网页中的文字设置字体.字号.颜色等样式属性.下面我们来看一个例子,下面代码实现:为网页中的文字设 ...
表格（HTML和CSS属性）
表格作用:用来显示数据,整理数据表格格式:<table><caption></caption><thead><tr> th <td& ...
简述css属性选择器的几种定义方式_CSS基础试题
一.单选题 1.CSS是利用( B )XHTML标签构建网页布局. A. C. D. 2.在CSS语言中下列哪一项是"左边框"的语法( C ) A.borde ...
表格、表格CSS属性及HTML属性、表单元素、type类型、内联块的对齐方式
表格 table thead tbody tfoot table>tr>td(th加粗居中显示) css属性 border-sapcing:数值px; 表格边框设置为细线 borde-co ...
html如何设置自动对齐,HTML5 教程之CSS 水平对齐(Horizontal Align)
CSS 水平对齐(Horizontal Align) 在CSS中,有几个属性用于元素水平对齐. 块元素对齐块元素是一个元素,占用了全宽,前后都是换行符. 块元素的例子: 文本对齐,请参阅 CSS文本 ...

css属性之vertical-align

css属性之vertical-align

css属性之vertical-align相关推荐

最新文章

热门文章