欢迎光临
我们一直在努力

怎么使用CSS实现文本左对齐、右对齐和居中对齐

这篇文章主要介绍怎么使用CSS实现文本左对齐、右对齐和居中对齐,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

  语法格式:

  text-align:(文本位置)

  位置 说明

  left 左对齐

  right 右对齐

  center 居中对齐

  justify 两端对齐

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

  文本左对齐的设置方法:

  text-align:left;

  文本右对齐设置方法:

  text-align:right;

  文本居中对齐设置方法:

  text-align:center;

  文本两端对齐设置方法:

  text-align:justify;

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

  TextAlign.html

  <!DOCTYPEhtml>

  <html>

  <head>

  <metacharset="utf-8"/>

  <linkrel="stylesheet"href="TextAlign.css"/>

  <title></title>

  </head>

  <body>

  <divclass="TextLeft">

  php中文网左对齐<br/>

  php中文网<br/>

  php中文网<br/>

  php

  </div>

  <divclass="TextRight">

  php中文网右对齐<br/>

  php中文网<br/>

  php中文网<br/>

  php

  </div>

  <divclass="TextCenter">

  php中文网居中对齐<br/>

  php中文网<br/>

  php中文网<br/>

  php

  </div>

  <divclass="TextJustify">

  php中文网<br/>

  两端对齐<br/>

  php中文网<br/>

  php

  </div>

  </body>

  </html>

  TextAlign.css

  .TextLeft{

  margin-top:24px;

  margin-left:32px;

  border:1pxsolid#ff6a00;

  width:480px;

  text-align:left;

  }

  .TextRight{

  margin-top:24px;

  margin-left:32px;

  border:1pxsolid#ff6a00;

  width:480px;

  text-align:right;

  }

  .TextCenter{

  margin-top:24px;

  margin-left:32px;

  border:1pxsolid#ff6a00;

  width:480px;

  text-align:center;

  }

  .TextJustify{

  margin-top:24px;

  margin-left:32px;

  border:1pxsolid#ff6a00;

  width:480px;

  text-align:justify;

  text-justify:distribute-all-lines;

  }

以上是“怎么使用CSS实现文本左对齐、右对齐和居中对齐”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注云搜网行业资讯频道!

赞(0)
【声明】:本博客不参与任何交易,也非中介,仅记录个人感兴趣的主机测评结果和优惠活动,内容均不作直接、间接、法定、约定的保证。访问本博客请务必遵守有关互联网的相关法律、规定与规则。一旦您访问本博客,即表示您已经知晓并接受了此声明通告。