文字垂直水平对齐方式
<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+,其他现代浏览器。