HTML中怎么使文字各种居中对齐

6月20日, 周六, 2026
雨泽
技术分享
共 10 次阅读

<!DOCTYPE HTML>
<html lang="en">
<head>
 <title>html文字居中测试</title>
 <meta charset="UTF-8">
 <style type="text/css">
 body{background: #ddd;}
 div{width:300px;height:180px;margin:10px auto;color:#fff;font-size:24px;}
 .box1{background: #71a879;text-align: center;}
 .box2{background: #6a8bbc;line-height: 200px;}
 .box3{background: #dea46b;text-align: center;line-height: 200px;}
 </style>
</head>
<body>
<div  class="box1">html文字水平居中</div>
<div  class="box2">html文字垂直居中</div>
<div  class="box3">html文字水平上下居中</div>
</body>
</html>.

1、平水居中：text-align:center；

text-align 属性规定元素中的文本的水平对齐方式。

该属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式。通过允许用户代理调整行内容中字母和字之间的间隔，可以支持值 justify；不同用户代理可能会得到不同的结果。

2、垂直居中：line-height:height;

line-height 属性设置行间的距离（行高）。

注释：不允许使用负值。