CSS 文本对齐方式

文本对齐

text-align 属性用于设置文本的水平对齐方式。

文本可以左对齐或右对齐，或居中对齐。

下例展示了居中对齐以及左右对齐的文本（如果文本方向是从左到右，则默认为左对齐；如果文本方向是从右到左，则默认是右对齐）：

<!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>

运行一下

当 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>
在我年幼脆弱的时候，父亲给了我一些建议，从那时起我就一直在想这些建议，他说“每当你想批评别人的时候，只要记住，这个世界上所有的人都没有你所拥有的优势。”
</div>
</body>
</html>

运行一下

文本方向

direction 和 unicode-bidi 属性可用于更改元素的文本方向：

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
  direction: rtl;
  unicode-bidi: bidi-override;
}
</style>
</head>
<body>
<p>这是默认的文本方向。</p>
<p class="ex1">这是从右向左的文字方向。</p>
</body>
</html>

运行一下

垂直对齐

vertical-align 属性设置元素的垂直对齐方式。

本例演示如何设置文本中图像的垂直对齐方式：

<!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="/images/demo.png" alt="demo" width="180" height="120" > 默认对齐方式的图像。</p><br>
<p>一幅 <img class="top" src="/images/demo.png" alt="demo" width="180" height="120" > 上对齐的图像。</p><br>
<p>一幅 <img class="middle" src="/images/demo.png" alt="demo" width="180" height="120" > 居中对齐的图像。</p><br>
<p>一幅 <img class="bottom" src="/images/demo.png" alt="demo" width="180" height="120" > 下对齐的图像。</p>
</body>
</html>

运行一下

CSS 文本对齐方式

文本对齐

文本方向

垂直对齐

分类导航