[CSS碎片知识] 深入理解 vertical-align
参考文章
- 我对CSS vertical-align的一些理解与认识(一)
- CSS vertical-align的深入理解(二)之text-top篇
- CSS深入理解vertical-align和line-height的基友关系
1. vertical-align 作用是啥?
正如字面意思: 垂直居中
2. vertical-align 有多少属性,默认是什么?
值 | 描述 |
---|---|
长度 | 通过距离升高(正值)或降低(负值)元素。'0cm' 等同于'baseline' |
百分值 – % | 通过距离(相对于1line-height1 值的百分大小)升高(正值)或降低(负值)元素。'0%' 等同于'baseline' |
baseline | 默认。元素的基线与父元素的基线对齐。 |
sub | 降低元素的基线到父元素合适的下标位置。 |
super | 升高元素的基线到父元素合适的上标位置。 |
top | 把对齐的子元素的顶端与line box顶端对齐。 |
text-top | 把元素的顶端与父元素内容区域的顶端对齐。 |
middle | 元素的中垂点与 父元素的基线加1/2父元素中字母x的高度 对齐。 |
bottom | 把对齐的子元素的底端与line box底端对齐。 |
text-bottom | 把元素的底端与父元素内容区域的底端对齐。 |
inherit | 采用父元素相关属性的相同的指定值。 |
3. 为什么我的vertical-align属性不起作用
只有一个元素属于inline或是inline-block(table-cell也可以理解为inline-block水平)水平,其身上的vertical-align属性才会起作用。所以,类似下面的代码就不会起作用:
span{vertical-align:middle;}div{vertical-align:middle;}
默认情况下, 什么标签可以使用 vertical-align 例如图片,按钮,单复选框,单行/多行文本框等HTML控件,只有这些元素默认情况下会对vertical-align属性起作用。
在线DEMO: vertical-align属性测试面板页面
4. vertical-align默认的对齐方式是?
vrtical-align默认值是baseline, 也就是基线对齐。而基线是什么,基线就是字母X的下边缘(参见“字母’x’在CSS世界中的角色和故事”一文)。所以,妹子图片的下边缘就和后面zxx中的字母x下边缘对齐(见下图)。而字符zxx本身是有高度的,对吧,于是,图片下面就留空了。
5. vertical-align和 line-height 之间 是 好基友关系
bootstrap 中 , <input class=“form-control” /> 后面 和一个 button 放在一起, 就会发现, 会出现不对齐的方式, button 会往下偏一点.
类似下图, 会偏差一点
解决方案: 让vertical-align失效
img { display: block; }
例如图片,按钮,单复选框,单行/多行文本框等HTML控件,只有这些元素默认情况下会对vertical-align属性起作用。