• :在线测试工具暂时不可用,小伙伴们可以使用本地编辑器来代替,绿叶全新版本正在快马加鞭开发中,比心~

4.6 文本水平对齐text-align

一、text-align属性

在CSS中,使用text-align属性控制文本的水平方向的对齐方式:左对齐、居中对齐、右对齐。

语法:

text-align:属性值;

说明:

text-align属性取值如下表:

表1 text-align属性
text-align属性值 说明
left 默认值,左对齐
center 居中对齐
right 右对齐

text-align属性只能针对文本文字和img标签,对其他标签无效。记住那,text-align属性不仅对文本文字有效,对img标签也有效!

举例:

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>text-align属性</title>
    <style type="text/css">
        #p1{text-align:left;}
        #p2{text-align:center;}
        #p3{text-align:right;}
    </style>
</head>
<body>
    <p id="p1"><strong>左对齐</strong>:好好学习,天天向上。</p>
    <p id="p2"><strong>居中对齐</strong>:好好学习,天天向上。</p>
    <p id="p3"><strong>右对齐</strong>:好好学习,天天向上。</p>
</body>
</html>

在浏览器预览效果如下:

text-align属性

:本站所有教程均为原创,大部分已经与人民邮电出版社合作出版,禁止转载和抄袭,否则绿叶学习网和人民邮电出版社必将追究法律责任,附录:互联网著作权保护法。【法律顾问:张俊律师】

小伙伴们也可以加一下QQ群,在“群文件”中可以获取学习资源以及配套资源,以及跟其他小伙伴交流,站长也在群内。

(1)QQ群:519225291(暗号:lvye

(2)绿叶学习网常见问题解答

回到顶部