文字一行居中 多行左对齐的处理方法

踩坑记录

需求：

标题文字，一行的情况下居中；超出一行则左对齐

如果只用text-align: center，是达不到这个效果的。

0

解决方案：

给<p>元素加上text-align:le属性，而<p>元素的父元素则加上text-align:center属性；

这样，文字为一行的时候会居中，而当文字超过一行，p元素被撑开到父元素的宽度，文字就会左对齐了

效果

0

code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!doctype html>
<html>
	<head>
		<title>dealwithword</title>
		<style>
			.container {
				width: 100px;
				height: 100px;
				background-color: #eef;
				text-align: center;
				margin-bottom: 10px;
			}
			p {
				text-align: left;
			}
		</style>
	</head>
	<body>
		<div class="container">
			居中文字
		</div>
		<div class="container">
			<p>换行需要左对齐</p>
		</div>
	</body>
</html>