文字垂直水平对齐方式

<div>123</div>   div{width:200px;height:200px;}

怎么才能做到123的位置水平垂直方向的随意变化，例如左上，中下

水平方向的话使用text-align就可以了，兼容性很好，关键是垂直方向。

css也有vertival-align来设置垂直方向的定位，但是它是为了table-cell设计的

要用到vertical-align，需要将div设置dispaly：table-cell

但是设置了table-cell后div设置position 就没有效果了，div就变成一个<td>了。

换一种结构，<div><span>123</span></div>，将里面的span设置dispaly：table-cell，这样div还是可以使用position等属性。

但是span的大小是包裹性质的，它的大小取决的文字的大小，这样文字在一个和它一样大小的容器里面怎么移动。

我们将span 设置和div一样的大小，span{width:200px;height:200px;}

现在是可以了，但是很麻烦。

我们设置 span{

display: table-cell;

width:inherit;
height:inherit;
vertical-align:inherit;

}，这样就不需要管span了，只管在div上设置属性就可以了，通过text-align和vertical-align来控制文字的位置。

这个方法支持ie8+,其他现代浏览器。

 

 

转载于:https://www.cnblogs.com/kanyuan/p/3491950.html