上查看所有课程
CSS text-align 属性用于水平对齐元素中的文本。例如，
h1 {
text-align: center;
}浏览器输出
在这里，text-align 属性将 h1 元素中的文本内容水平居中。
Text-Align 的语法
text-align 属性的语法如下：
text-align: left | right | center | justify | initial | inherit;这里，
left: 文本左对齐（默认值）right: 文本右对齐center: 文本居中对齐justify: 文本两端对齐initial: 将值设置为默认值inherits: 从父元素继承值
Text-Align 属性示例
让我们看一个 text-align 属性的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS text-align</title>
</head>
<body>
<p class="left">This text is aligned in the left.</p>
<p class="center">This text is aligned in the center.</p>
<p class="right">This text is aligned in the right.</p>
<p class="justified">This text is justified.</p>
</body>
</html>/* aligns the text to left */
p.left {
text-align: left;
}
/* aligns the text in the center */
p.center {
text-align: center;
}
/* aligns the text to the right */
p.right {
text-align: right;
}
/* justifies the text */
p.justified {
text-align: justified;
}浏览器输出
内联元素的 Text-Align
text-align 属性不能直接与内联元素一起使用。将 text-align 应用于内联元素的一种方法是针对父块级元素。例如，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS text-align</title>
</head>
<body>
<span class="outside">This inline element is outside.</span>
<p>
<span class="inside">
This inline element is inside <p> element.
</span>
</p>
</body>
</html>/* does not work */
span {
text-align: right;
}
/* aligns the inner span element to the right*/
p {
text-align: right;
}浏览器输出
同样，我们也可以通过将内联元素的 display 属性设置为 block 来将 text-align 应用于内联元素。例如，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS text-align</title>
</head>
<body>
<span class="first">This is inline element.</span><br />
<span class="second" >This inline elements display property is set to block.</span >
</body>
</html>/* does not work */
span.first {
text-align: center;
background-color: lightgreen;
}
/* works after setting display to block */
span.second {
display: block;
text-align: right;
background-color: lightgreen;
}浏览器输出
在这里，display: block 将内联元素 span 转换为块级元素。这允许 text-align 属性将文本右对齐。