CSS 文本对齐方式和文本方向


目录

    显示目录


文本对齐和文本方向

在本章中,您将了解以下属性:

  • text-align
  • text-align-last
  • direction
  • unicode-bidi
  • vertical-align

文本对齐

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>Heading 1 (center)</h1>
<h2>Heading 2 (left)</h2>
<h3>Heading 3 (right)</h3>

<p>The three headings above are aligned center, left and right.</p>

</body>
</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>Example text-align: justify</h1>

<p>The text-align: justify; value stretches the lines so that each line has equal width (like in newspapers and magazines).</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>



文本最后对齐

text-align-last 属性指定如何对齐文本的最后一行。

例子

将最后一行文本对齐三个 <p> 元素:

 p.a
{
   
text-align-last: right;
}
p.b
{
   
text-align-last: center;
}
p.c
{
    text-align-last: justify;
}

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style>
p.a {
  text-align-last: right;
}

p.b {
  text-align-last: center;
}

p.c {
  text-align-last: justify;
}
</style>
</head>
<body>

<h1>The text-align-last Property</h1>

<h2>text-align-last: right:</h2>
<p class="a">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>

<h2>text-align-last: center:</h2>
<p class="b">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>

<h2>text-align-last: justify:</h2>
<p class="c">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>

</body>
</html>




文字方向

方向 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>



垂直对齐

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

例子

设置文本中图像的垂直对齐方式:

 img.a {
  vertical-align: baseline;
}
img.b {
  
  vertical-align: text-top;
}
img.c {
  vertical-align: 
  text-bottom;
}
img.d {
  vertical-align: sub;
}

  img.e {
  vertical-align: super;
}

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style>
img.a {
  vertical-align: baseline;
}

img.b {
  vertical-align: text-top;
}

img.c {
  vertical-align: text-bottom;
}

img.d {
  vertical-align: sub;
}

img.e {
  vertical-align: super;
}
</style>
</head>
<body>

<h1>The vertical-align Property</h1>

<h2>vertical-align: baseline (default):</h2>
<p>An <img class="a" src="sqpurple.gif" width="9" height="9"> image with a default alignment.</p> 

<h2>vertical-align: text-top:</h2>
<p>An <img class="b" src="sqpurple.gif" width="9" height="9"> image with a text-top alignment.</p> 

<h2>vertical-align: text-bottom:</h2>
<p>An <img class="c" src="sqpurple.gif" width="9" height="9"> image with a text-bottom alignment.</p>

<h2>vertical-align: sub:</h2>
<p>An <img class="d" src="sqpurple.gif" width="9" height="9"> image with a sub alignment.</p> 

<h2>vertical-align: sup:</h2>
<p>An <img class="e" src="sqpurple.gif" width="9" height="9"> image with a super alignment.</p>

</body>
</html>



CSS 文本对齐/方向属性

direction

指定文本方向/书写方向

text-align

指定文本的水平对齐方式

text-align-last

指定如何对齐文本的最后一行

unicode-bidi

与 Direction 属性一起使用,设置或返回是否应覆盖文本以支持同一文档中的多种语言

vertical-align

设置元素的垂直对齐方式