HTML中的行文字垂直对齐方式！有问，请会的指点！

HTML中的行文字垂直对齐方式！有问，请会的指点！

这样肯定是不行的，垂直方向的对齐其实不好弄。水平方向你可以通过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

如以上回答内容为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！

点此我要举报以上问答信息