如何正确使用css中vertical-align
2016-05-11 23:40
666 查看
首先明确,vertical-align只对inline-block和inline元素有效。
在说vertical-align之前,需要先说明一下什么是line box。
浏览器中显示的一行会包含多个非block元素(有block元素时就换行了),通过一个box可以把这一行包含起来,这就是一个line box。
比如一个div,他会占据一行,包裹着内部所有非block元素的就是一个line box。
line box的高度,是本行中拥有最高行高的元素的高度。
此时,对拥有最高行高的非block元素设置vertical-align值,会直接影响本行的基线位置(可以说就是设置了本行的基线位置),本行中其他非block元素设置vertical-align时,都是相对于本行的基线位置进行显示。
举例:
会发现显示如下图所示。
1所在的span高度最高,所以其设置的vertical-align会直接影响本行的基线位置。调整1所在的span出现的先后顺序,结果都是一样的。
再举例:
在一个block元素中使用
#parent::before或者#parent::after
{
content:'';
display:inline-block;
height:100%;
vertical-align:middle;
}
可使#parent中的非block元素垂直居中显示,也是上述的原理。
ps:
如果想让1在span中垂直居中显示,保证span的display是inline-block,然后将span的line-height设置为50px,同span高度相等即可。不可设置为100%,最后的line-height只是文字大小的高度。
在说vertical-align之前,需要先说明一下什么是line box。
浏览器中显示的一行会包含多个非block元素(有block元素时就换行了),通过一个box可以把这一行包含起来,这就是一个line box。
比如一个div,他会占据一行,包裹着内部所有非block元素的就是一个line box。
line box的高度,是本行中拥有最高行高的元素的高度。
此时,对拥有最高行高的非block元素设置vertical-align值,会直接影响本行的基线位置(可以说就是设置了本行的基线位置),本行中其他非block元素设置vertical-align时,都是相对于本行的基线位置进行显示。
举例:
<div style="height:100px;width:100px;border:1px solid black;"> <span style="display:inline-block;height:50px;vertical-align:top;border:1px solid black;">1</span> <span style="vertical-align:top;">2</span> <span style="vertical-align:middle;">3</span> <span style="vertical-align:bottom;">4</span> </div> <div style="height:100px;width:100px;border:1px solid black;"> <span style="display:inline-block;height:50px;vertical-align:middle;border:1px solid black;">1</span> <span style="vertical-align:top;">2</span> <span style="vertical-align:middle;">3</span> <span style="vertical-align:bottom;">4</span> </div> <div style="height:100px;width:100px;border:1px solid black;"> <span style="display:inline-block;height:50px;vertical-align:bottom;border:1px solid black;">1</span> <span style="vertical-align:top;">2</span> <span style="vertical-align:middle;">3</span> <span style="vertical-align:bottom;">4</span> </div>
会发现显示如下图所示。
1所在的span高度最高,所以其设置的vertical-align会直接影响本行的基线位置。调整1所在的span出现的先后顺序,结果都是一样的。
<div style="height:100px;width:100px;border:1px solid black;"> <span style="vertical-align:top;">2</span> <span style="vertical-align:middle;">3</span> <span style="vertical-align:bottom;">4</span> <span style="display:inline-block;height:50px;vertical-align:top;border:1px solid black;">1</span> </div> <div style="height:100px;width:100px;border:1px solid black;"> <span style="vertical-align:top;">2</span> <span style="vertical-align:middle;">3</span> <span style="vertical-align:bottom;">4</span> <span style="display:inline-block;height:50px;vertical-align:middle;border:1px solid black;">1</span> </div> <div style="height:100px;width:100px;border:1px solid black;"> <span style="vertical-align:top;">2</span> <span style="vertical-align:middle;">3</span> <span style="vertical-align:bottom;">4</span> <span style="display:inline-block;height:50px;vertical-align:bottom;border:1px solid black;">1</span> </div>
再举例:
在一个block元素中使用
#parent::before或者#parent::after
{
content:'';
display:inline-block;
height:100%;
vertical-align:middle;
}
可使#parent中的非block元素垂直居中显示,也是上述的原理。
ps:
如果想让1在span中垂直居中显示,保证span的display是inline-block,然后将span的line-height设置为50px,同span高度相等即可。不可设置为100%,最后的line-height只是文字大小的高度。
相关文章推荐
- DIV+CSS和Table区别
- CSS基础知识一(CSS的应用方式、CSS选择器、选择器的声明、文字CSS效果、)
- CSS基础知识二(段落设置CSS效果、图片边框、div和span区别、CSS控制背景、CSS控制链接)
- CSS应用:阴影和轮廓
- CSS选择器总结
- 输入班级人数,姓名,分数,创建集合,并按照表格样式打印出来
- openGL 填充样式
- CSS预处理器
- css3实战版的点击列表项产生水波纹动画——之jsoop面向对象封装版
- CSS的两个class选择器紧挨在一起
- CSS的两个class选择器紧挨在一起
- [翻译]CSS模块-未来的编码方式
- H5Css3动画 背景图 制作帧动画
- css3新的选择器
- CSS布局的三种方式:
- CSS3:动画大全
- css中的强制换行
- WPF中Grid实现网格,表格样式通用类
- Box Shadow(阴影)-Css3演示 工具
- Box Shadow(阴影)—Css3演示 工具