CSS文字居中对齐学习-Toy模板网

这篇具有很好参考价值的文章主要介绍了CSS文字居中对齐学习。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

CSS使用text-align属性设置文字对齐方式；text-align:center，这样就设置了文字居中对齐；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css 水平居中</title>
		<style>
			.box {
				background: pink;
				text-align:center;
			}
                                                h1 {text-align:center;}
		</style>
	</head>
	<body>
                                <h1>我是标题</h1>
		<div class="box" style="width: 200px;height: 100px;border: 3px solid green;">AAB文本BCC</div>
		<div class="box" style="width: 100px;height: 50px;border: 3px solid green;">文字</div>
                                <p class="box">2021 年 01 月 01 号</p>
                                <a class="box" url="">aaaaa请单击ccccccccc</p>

                                <table border="1">
                                    <tr>
                                      <td>A</td>
                                      <td>行1，列2</td>
                                    </tr>
                                    <tr>
                                      <td>行2，列1</td>
                                      <td>行2，列2</td>
                                    </tr>
                                </table>
	</body>

</html>

做一个html文档，网页元素包括：h1, 一个div，一个div，一个p（段落），一个链接（a），一个表格；

定义了CSS样式类box，其中指定了背景色为pink，文字对齐为居中对齐；定义了h1元素的文字对齐方式为居中；

2个div引用了css类box；p和a也引用了样式类box；

运行如下；

CSS文字居中对齐学习,web前端,css,前端,文字对齐