如何使用CSS实现文本左对齐、右对齐和居中对齐-css教程-PHP中文网

文本的位置在网页布局中是必不可少的，今天的这篇文章就来给大家分享关于使用css实现文本左对齐、右对齐和居中对齐的方法，下面我们来看具体的内容。

要设置文本对齐（左对齐，右对齐，居中对齐）需要用到的CSS属性是text-align属性。（相关推荐：CSS学习手册）

语法格式：

text-align :(文本位置）

位置	说明
left	左对齐
right	右对齐
center	居中对齐
justify	两端对齐

接下我们来分别看看这四种对齐方式的设置方法

文本左对齐的设置方法：

立即学习“前端免费学习笔记（深入）”；

text-align：left;

文本右对齐设置方法：

text-align：right;

文本居中对齐设置方法：

text-align：center;

文本两端对齐设置方法：

text-align：justify;

我们来看具体的代码示例1：

TextAlign.html

墨鱼aigc

一款超好用的Ai写作工具，为用户提供一键生成营销广告、原创文案、写作辅助等文字生成服务。

下载




    
    
    
    
    
  
    php中文网左对齐

    php中文网

    php中文网

    php
  
  
    php中文网右对齐

   php中文网

    php中文网

    php
  
  
    php中文网居中对齐

    php中文网

    php中文网

    php
  
  
    php中文网

    两端对齐

    php中文网

    php

TextAlign.css

.TextLeft{
    margin-top:24px;    
    margin-left:32px;    
    border:1px solid #ff6a00;    
    width:480px;    
    text-align:left;
}
.TextRight {
    margin-top: 24px;    
    margin-left: 32px;    
    border: 1px solid #ff6a00;    
    width: 480px;    
    text-align: right;
}
.TextCenter {
    margin-top: 24px;    
    margin-left: 32px;    
    border: 1px solid #ff6a00;    
    width: 480px;    
    text-align: center;
}
.TextJustify {
    margin-top: 24px;    
    margin-left: 32px;    
    border: 1px solid #ff6a00;    
    width: 480px;    
    text-align: justify;    
    text-justify: distribute-all-lines;
}

显示结果

使用Web浏览器显示上述HTML文件。将显示如下所示的效果。

360截图20181115101423160.jpg