html文本对齐有哪些方式

173次阅读
没有评论

HTML文本对齐方式指的是在HTML中如何设置文本的水平对齐方式。文本对齐方式可以通过使用<div>、<p>、<span>、<h1>等元素的style属性中的text-align属性来设置,例如:

1. left:文本及其内容将靠左对齐;

<div style=”text-align:left;”>
这里是靠左对齐的文本。
</div>

2. right:文本及其内容将靠右对齐;

<p style=”text-align:right;”>
这里是靠右对齐的文本。
</p>

3. center:文本及其内容将居中对齐;

<span style=”text-align:center;”>
这里是居中对齐的文本。
</span>

4. justify:文本及其内容将两端对齐,这意味着文本的每一行的左右两边的空格将会被平均地分布。

<h1 style=”text-align:justify;”>
这里是两端对齐的文本。
</h1>

5.示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1 {
            text-align: center;
        }

        h2 {
            text-align: left;
        }

        h3 {
            text-align: right;
        }

        #duiqi {
            border: 1px solid black;
            padding: 10px;
            width: 200px;
            height: 200px;
            text-align: justify;
        }
    </style>
</head>
<body>
<div style="width: 700px;margin-left: 100px;margin-top: 50px;">
    <h1>标题 1(居中对齐)</h1>
    <h2>标题 2(左对齐)</h2>
    <h3>标题 3(右对齐)</h3>

    <p>上面的三个标题是居中、左和右对齐。</p>
    <br><br>

    <h1>text-align: justify; 实例</h1>

    <p>text-align: justify; 值会拉伸线条,使每条线都有相等的宽度(比如报纸和杂志)。</p>

    <div id="duiqi">
        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>
</div>
</body>
</html>

6.效果图:

html文本对齐有哪些方式

正文完
 
评论(没有评论)