vertical-align使用规则

作用环境：父元素设置line-height。
作用对象：子元素中的inline-block和inline元素。
当父元素设置了line-height
父元素（inline-block\block）必须含有line-height（inline元素有无皆可），子元素中的（inline-block/inline元素）vertical-align才能起作用。
vertical-align不可继承，必须对子元素单独设置。

关于定义——
在父元素定义了line-height的条件下，vertical-align的作用是让（inline/inline-block）子元素依据父元素的基点对齐。

值   描述
长度   通过距离升高（正值）或降低（负值）元素。'0cm'等同于'baseline'
百分值 – %   通过距离（相对于1line-height1值的百分大小）升高（正值）或降低（负值）元素。'0%'等同于'baseline'
baseline   默认。元素的基线与父元素的基线对齐。
sub   降低元素的基线到父元素合适的下标位置。
super   升高元素的基线到父元素合适的上标位置。
top   把对齐的子元素的顶端与line box顶端对齐。
text-top   把元素的顶端与父元素内容区域的顶端对齐。
middle   元素的中垂点与父元素的基线加1/2父元素中字母x的高度对齐。
bottom   把对齐的子元素的底端与line box底端对齐。
text-bottom   把元素的底端与父元素内容区域的底端对齐。
inherit   采用父元素相关属性的相同的指定值。
数值详解：
1. 首先关于数值，见下面的示例：
　.test{vertical-align:-2px;}
　元素相对于基线向下偏移两像素，这个常常用来修复单选框/复选框与12像素文字大小不对齐的问题。

2. 再者关于百分数值，这里的vertical-align，是相对于此标签继承的line-height值决定的。例如，如下示例代码：
　.test{vertical-align:-10%;}
　假设这里的.test的标签继承的行高是20px，则这里的所代表的实际值是：-10%*20px=-2px。 IE6/IE7浏览器下的vertical-align的百分比值不支持小数line-height。

　其他的值更多参考：张鑫旭的“我对CSS vertical-align的一些理解与认识（一）”

关于作用环境——
只有一个元素属于inline或是inline-block（table-cell也可以理解为inline-block水平）水平，其身上的vertical-align属性才会起作用。
所谓inline-block水平的元素，即可以与inline水平元素混排，又能设置高宽属性的元素，例如图片，按钮，单复选框，单行/多行文本框等HTML控件，只有这些元素默认情况下会对vertical-align属性起作用。
对inline元素设置vertical-align是有作用的，只是要重新设置line-height的值，否则继承了父元素的line-height只能垂直居中。

例一：inline元素作为父元素可以不设置line-height，字体会撑起一个适合子元素作用的高度。小白点可以各种对齐。
<span class="box"> <span class="dot"></span> 我是一段卡哇伊的文字。 </span>
.box{background:black; color:white; padding-left:20px;}
.dot{display:inline-block; width:4px; height:4px; background:white;vertical-align:top;}

例二：div父元素必须设置line-height，否则对其设置vertical-align无效，图片不会在绿色框里动~
复制代码
<div class="outerbox">
<img src="C:\Users\Administrator\Desktop\test.jpg"/>
<span>这是外层元素的内部文字</span>
</div>
.outerbox{width:300px; line-height: 300px;font-size: 16px; }
.outerbox img{width: 30px; height:30px; vertical-align: bottom;}
.outerbox span{vertical-align: top;}
复制代码

对文字设置vertical-align:top 无效是因为文字继承了父元素的line-height，导致文字居中，要想vertical-align起作用，可在该元素上设置line-height小一些覆盖父元素。

二、当父元素没有设置line-height时，inline/inline-block子元素之间对齐。
当父元素没有设置line-height时，只对行内元素的兄弟元素对齐有用，无法子元素居中对齐父元素。
设置了vertical-align:middle的子元素的中线与兄弟元素的基线对齐。若兄弟元素都设置该项，则居中对齐。

例：黄色的线为图片中垂线。
<div style="height:200px">
<img src="C:\Users\Administrator\Desktop\桌面\gallery4.jpg" style="width:50px;vertical-align:middle;">
<span style="vertical-align:middle">hahahahhah</span>
</div>

只设文字的vertical-align，则文字的中线对齐图片底线

只设图片的vertical-align，则图片的中线与文字的基线对齐

两个的vertical-align都为middle，则两个的中线互相对齐

vertical-align使用规则相关推荐

HighCharts基本使用
一.简叙 HighCharts是一个非常强大的画图插件,在以后的工作汇报,数字展示,它将是一把利器.既然是插件,那么就有它的使用规则,我们只需要遵循它的使用规则,就可以画出我们想要的展示效果了.期待吗 ...
Zabbix配置详解
为什么80%的码农都做不了架构师?>>> zabbix 配置了解 Hosts zabbix中的hosts就是指你想监控的设备,如服务器.工作站.交换机等等.如果你想监控某个主机 ...
你与数据科学家只差这26条python技巧
戳蓝字"CSDN云计算"关注我们哦! 作者 | Peter Gleeson 来源 | Python数据科学编译 | wLsq Python是目前世界上最流行的编程语言之一.因为: ...
如何调试CSS的跨浏览器样式bug
首先要做的是挑选一个好的浏览器.我的选择是Chrome,因为它拥有强大的调试工具.当我在Chrome上完成调试后,我会接着在Safari或者Firefox上调试. 如果在这些"好的" ...
【译】Vertical-Align: All You Need To Know
原文地址:Vertical-Align: All You Need To Know Often I need to vertically align elements side by side. 我经 ...
css+js+jq实训笔记
css+js+jq实训笔记 css第一天 css第二天 css第三天 css第四天 css第五天 css第六天 js第一天 js第二天 js第三天 js第四天 js第五天 js第六天 jq第一天 jq ...
HTML5与CSS3基础教程笔记
1.一个网络注意包括以下三个部分 *文本内容(text content):在页面上让访问者了解页面内容的纯文字. *对其他文件的引用(references to other files):这些文件加载 ...
自己搜集的一些前端面试题初中级(较多)
Map 和Set的区别? 1. Map 是键值对, Set是值的集合, 当然键和值可以是任何得值, 2. Map可以通过get方法获取值, 二set不能因为它只有值 3. 都能通过迭代进行for o ...
JavaScript正则表达式实现注册信息校验
Java和JavaScript正则表达式的对比 Java中也有正则表达式,默认情况下必须要精确匹配 ;而在JS中默认是模糊匹配,只要字符串包含了正则表达式的内容就返回true 正则表达式匹配字符串 ...
一系列有用的Python技巧
Python作为世界上最受欢迎的编程语言之一.这有很多原因: 易于学习超级通用具有大量的模块和库本文将尝试以A-Z的顺序分享其中一些有用的技巧和窍门.这些"窍门"大部分是我在 ...

vertical-align使用规则

vertical-align使用规则相关推荐

最新文章

热门文章