1.vertical-align的应用点
- 应用于行内元素(包括行内块)
- 应用于表单元格(应用于单元格的时候只能识别baseline , top, middle , bottom)
- vertical-align 不影响块元素中的元素,也就是对块元素是无效的
- 可以影响表单格中的元素
2.vertical-align的运用
- 2-1 图像相对于文字的垂直对齐
效果如上图
需要设置的样式如下
<!-- html-->
<div>
sdfaasdf<img src="">klha
</div>
/*css*/
div{
overflow: hidden;
display: block;
}
div img{
width: 100px;
background: red;
vertical-align: middle;
}
这里的vertical-align应用于img,垂直居中生效,通过该例子,我们可以扩大一下思路
那就就是只要将元素设置display:inline-block,也可以垂直居中。
- 2-2 文本垂直对齐
<!-- html-->
<div>
<span>文本</span>
</div>
/*css*/
div{
width: 400px;
height: 300px;
border: red solid 1px;
display: table;
text-align: center;
}
div span{
display: table-cell;
vertical-align: middle;
}
这里的vertical-align应用于表单元格,父元素需要设置为display: table;
子元素需要设置为display: table-cell;
- 2-3 行内块元素垂直对齐
上面说了一个行内块元素相对于文字文本垂直居中,这里说一下行内块元素垂直居中
很多朋友可能试过在div中的行内块设置vertical-align:middle; 发现居然不生效,着实有些坑爹。
但是如果你想让块元素中的行内块垂直居中也不是不可能,方法有两种。
第一种:就像文本垂直居中一样:参考2-2
第二种:就是接下来说的
<!-- html-->
<div>
<div class="InlineBlock1"></div>
<div class="InlineBlock2"></div>
</div>
/*css*/
div{
width: 200px;
height: 200px;
background: yellow;
text-align: center;
}
.InlineBlock1{
display:inline-block;
width: 100px;
height: 100px;
background: green;
vertical-align: middle;
}
.InlineBlock2{
width: 0px;
height:100%;
display: inline-block;
vertical-align: middle;
}
效果如下
原理就在.InlineBlock2的样式上,设置高度为百分百,vertical-align: middle;这样就可以使旁边的绿色div有了可以有参考的对象,从而可以达到垂直居中的效果,然后把.InlineBlock2隐藏