这样肯定是不行的，垂直方向的对齐其实不好弄。水平方向你可以通过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了。给你一个简单的示例。
<!DOCTYPE HTML><html>
<head>
<meta charset="utf-8">
<title>新的元素</title>
</head>
<body>
<div style="height:100pxwidth:200pxbackground:#999text-align:centerline-height:90pxfont-size:20px">line-height</div>
<br /><br />
<div style="height:60pxwidth:200pxbackground:#999text-align:centerpadding-top:40pxfont-size:20px">padding-top</div>
</body>
</html>
需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html，编写问题基础代码。
2、在index.html中的<table>标签中，输入样式代码：style="text-align: right"。
3、浏览器运行index.html页面，此时单元格的对齐方式被成功修改为右对齐。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）