了解vertical-align支持的属性值以及组成
属性:
1.inherit
2.线类
baseline,top,middle,bottom
3.文本类
text-top,text-bottom
4.上标下标类
sub,super
5数值百分比类
20px,2em,20%
共性 都带数值 20px 20em 20%,都支持负值 margin,letter-spacing word-spacing vertical-align,行为表现一致 在baseline对齐基础上上下偏移对应数值大小
百分比类的差异
vertical-align的百分比值是相对于line-height计算的。
探讨各种display值对vertical-align的影响
vertical-align起作用是有条件的,应用于inline水平以及table-cell元素
inline水平的元素
img span strong em
inline-block input
table-cell元素
.table-cell:
默认状态下:图片,按钮,文字,和单元格
1.display:更改元素的显示水平
2.css声明更改元素的显示水平
在一个P标签中的img标签 设置了vertical-align:middle 图片不居中
不是vertical-align没起作用,而是太短,不够居中
实战:多行文字与图片垂直居中
文字
.test-list {text-align:justify}
.test-list > span{ display:inline-block; width:210px; vertical-align:middle }
.test-list > img{vertical-align:middle;}
vertical-align百分比是相对于line-height值计算的
{
line-height:30px;
vertical-align:-10%;
}相当于vertical-align=-3px
内联图片里面下边出现了空白,解决方法去掉行高,或者改变vertical-align属性bottom,top,middle都可以
基本现象衍生:垂直居中
vertical-align:middle;line-height:36px;
设置标签应用比图片大的行高,图片就近似垂直居中了。
底线,顶线,中线的行为表现
vertical-align:bottom
1.inline/inline-block元素:元素底部和整行的底部对齐
2.table-cell元素:单元格底padding边缘和表格行底部对齐
vertical-align:top
vertical-middle
1.inline/inline-block元素:元素的垂直中心点和父元素基线上1/2 x-height处对齐
2.table-cell元素:单元格填充盒子相对于外面的表格行居中对齐。
近似垂直居中
完全垂直居中:设置font-size:0
vertical-align:text-top/text-bottom
定义
1.vertical-algin:text-top
盒子的顶部和父级centent-area的顶部对齐
2.vertical-align:text-bottom
盒子的底部和父级content area的底部对齐
1.元素vertical-align垂直对齐的位置与前后的元素都没有关系;
2.元素vertical-align垂直对齐的位置与行高line-height没有关系,至于字体大小与font-size有关
实际作用
表情图片与文字的对齐效果 图片(16x16)
使用基线的问题在于图标偏上
使用顶线/底线的问题在于受其他内联元素影响,造成巨大定位偏差
使用中线也是不错的选择,单需要恰好的字体大小以及兼容性要求不高
使用文本底部较合适不受行高以及其他内联元素影响;
1.html中的上标
2.html中的下标
变小的是原来字体的75%大小
1. -->vertical-align:super
2. -->vertical-align:sub
定义
1.vertical-align:super
提高盒子的基线到父级合适的上标基线位置。
2.vertical-align:sub
降低盒子的基线到父级合适的下标基线位置。
实际应用
相邻元素不同vertical-align的行为表现
当出现前后不一致的时候
关注当前元素和父级,
前后并没有直接影响
IE6/7
firefox/chrome
以上是css深入理解vertical-align的详细介绍的详细内容。更多信息请关注PHP中文网其他相关文章!