CSS 文本对齐 详解
css3基础 2022-05-23 12:03:08小码哥的IT人生shichen
CSS 文本对齐
文本对齐
text-align 属性用于设置文本的水平对齐方式。
文本可以左对齐或右对齐，或居中对齐。
下例展示了居中对齐以及左右对齐的文本（如果文本方向是从左到右，则默认为左对齐；如果文本方向是从右到左，则默认是右对齐）：
示例代码：
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
</style>
</head>
<body>
<h1>标题 1（居中对齐）</h1>
<h2>标题 2（左对齐）</h2>
<h3>标题 3（右对齐）</h3>
<p>上面的三个标题是居中、左和右对齐。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
当 text-align 属性设置为 "justify" 后，将拉伸每一行，以使每一行具有相等的宽度，并且左右边距是直的（就像在杂志和报纸中）：
示例代码：
div {
text-align: justify;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
padding: 10px;
width: 200px;
height: 200px;
text-align: justify;
}
</style>
</head>
<body>
<h1>text-align: justify; 实例</h1>
<p>text-align: justify; 值会拉伸线条，使每条线都有相等的宽度（比如报纸和杂志）。</p>
<div>
In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
文本方向
direction 和 unicode-bidi 属性可用于更改元素的文本方向：
示例代码：
p {
direction: rtl;
unicode-bidi: bidi-override;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
direction: rtl;
unicode-bidi: bidi-override;
}
</style>
</head>
<body>
<p>This is the default text direction.</p>
<p class="ex1">This is right-to-left text direction.</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
垂直对齐
vertical-align 属性设置元素的垂直对齐方式。
本例演示如何设置文本中图像的垂直对齐方式：
示例代码：
img.top {
vertical-align: top;
}
img.middle {
vertical-align: middle;
}
img.bottom {
vertical-align: bottom;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
img.top {
vertical-align: top;
}
img.middle {
vertical-align: middle;
}
img.bottom {
vertical-align: bottom;
}
</style>
</head>
<body>
<p>一幅 <img src="/i/logo/w3logo-3.png" alt="phpcodeweb" width="180" height="167"> 默认对齐方式的图像。</p><br>
<p>一幅 <img class="top" src="/i/logo/w3logo-3.png" alt="phpcodeweb" width="180" height="167"> 上对齐的图像。</p><br>
<p>一幅 <img class="middle" src="/i/logo/w3logo-3.png" alt="phpcodeweb" width="180" height="167"> 居中对齐的图像。</p><br>
<p>一幅 <img class="bottom" src="/i/logo/w3logo-3.png" alt="phpcodeweb" width="180" height="167"> 下对齐的图像。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
