这样肯定是不行的,垂直方向的对齐其实不好弄。水平方向你可以通过text-align定义,垂直方向上确实有一个vertical-align,但这个属性所谓的对齐是相对于其他元素的,比如你的同一行的文字前面有一张图片,这个时候默认的是文字的底部与图片的底部对齐的的,只要这个时候你设置图片的vertical-align属性,即可以改变图片与文字的对齐方式。那么怎么控制文字的垂直方向呢?我经常用到两种方法,当然,这都是巧用的:
①:设置行高 line-height=容器的高度-文字的大小/2,这个时候元素在垂直方向上就会出现在你的容器的中间,比如,一个div的高度是100个像素,文字的大小是20px,那么你设置div的line-height的值为90px即可。同理要是你想文字在底部出现,那么设置为190px。
②:设置一下padding-top属性,通过这个属性你就可以控制你的文字和容器顶部的距离。
容器的实际高度是padding-top+height,你应该知道。这么理解,本来我的父容器是想设置为100px的,如果我想文字在垂直方向的中间,那么容器的一半就是50px,由于我文字本身的大小是20px的,所以文字的中间距离容器顶部应该是100px/2-20px/2=40px,现在容器的高度实际上变成了100px+40px,所以我把高度设置为100px-40px,那么容器的高度就保证为100px了。给你一个简单的示例。
新的元素
line-height
padding-top