首页 > 代码库 > css2--垂直对齐
css2--垂直对齐
## CSS2 vertical-align 垂直对齐
- baseline 默认值.基于基线对齐
- middle 位于同一行的非衬线字体小写字母的 1/2 处.不要为父元素设置高度和行高
- top 位于父元素一行的顶部
- bottom 位于父元素一行的底部
- text-top 位于同一行的文本的顶部
- text-bottom 位于同一行的文本的底部
- super 位于同一行的sub元素文本的基线对齐 <sup>上角标</sup>
- sub 位于同一行的sub元素文本的基线对齐 <sub>下角标</sub>
- 使用 vertical-align 在一行内，行内元素在垂直方向的对齐位置。
- vertical-align: 只能设置行内元素（inline inline-block)
#### 垂直居中对齐
vertical-align: middle;
text-align: center;
#### vertical-align 使用场景1： 一行内的垂直方向对齐
#### vertical-align 使用场景2： 多行内的垂直方向对齐
1. 为要垂直居中的子元素设置 ````vertical-align:middle````样式
2. 为该元素的父元素设置````display: table-cell````,并设置固定的高度
3. 然后再设置 ````vertical-align:middle````和水平对齐````text-align: center````
4. 当其元素设置为 ````display: table-cell````.并且宽度清零时，需要为父元素添加display: table;，并设置宽度100%
**可以把元素的所有内容（文本，子元素-inline, inline-block）都在垂直方向居中**
**在局部布局中使用display:table-cell;以减少对整体布局的影响**
<style type="text/css">
/*指定块元素图片垂直居中*/
.box-table{
display: table;
width:100%;
}
.box {
background-color: orange;
height: 200px;
display: table-cell;
vertical-align: middle;
text-align: center;
}
img{
width: 100px;
}
</style>
<script type="text/javascript"></script>
</head>
<body>
<div class="box-table">
<div class="box">
<img src="http://www.mamicode.com/img/bg.jpg" >
</div>
</div>
</body>
css2--垂直对齐