当前位置:Gxlcms > 前端框架 > 如何使用CSS实现文本左对齐、右对齐和居中对齐

如何使用CSS实现文本左对齐、右对齐和居中对齐

时间:2021-07-01 10:21:17 帮助过:39人阅读

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

要设置文本对齐(左对齐,右对齐,居中对齐)需要用到的CSS属性是text-align属性。(相关推荐:CSS学习手册)

语法格式:

  1. text-align :(文本位置)
位置说明
left左对齐
right右对齐
center居中对齐
justify两端对齐

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

文本左对齐的设置方法:

  1. text-align:left;

文本右对齐设置方法:

  1. text-align:right;

文本居中对齐设置方法:

  1. text-align:center;

文本两端对齐设置方法:

  1. text-align:justify;

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

TextAlign.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <link rel="stylesheet" href="TextAlign.css" />
  6. <title></title>
  7. </head>
  8. <body>
  9. <div class="TextLeft">
  10. Gxlcms左对齐<br />
  11. Gxlcms<br />
  12. Gxlcms<br />
  13. php
  14. </div>
  15. <div class="TextRight">
  16. Gxlcms右对齐<br />
  17. Gxlcms<br />
  18. Gxlcms<br />
  19. php
  20. </div>
  21. <div class="TextCenter">
  22. Gxlcms居中对齐<br />
  23. Gxlcms<br />
  24. Gxlcms<br />
  25. php
  26. </div>
  27. <div class="TextJustify">
  28. Gxlcms<br />
  29. 两端对齐<br />
  30. Gxlcms<br />
  31. php
  32. </div>
  33. </body>
  34. </html>

TextAlign.css

  1. .TextLeft{
  2. margin-top:24px;
  3. margin-left:32px;
  4. border:1px solid #ff6a00;
  5. width:480px;
  6. text-align:left;
  7. }
  8. .TextRight {
  9. margin-top: 24px;
  10. margin-left: 32px;
  11. border: 1px solid #ff6a00;
  12. width: 480px;
  13. text-align: right;
  14. }
  15. .TextCenter {
  16. margin-top: 24px;
  17. margin-left: 32px;
  18. border: 1px solid #ff6a00;
  19. width: 480px;
  20. text-align: center;
  21. }
  22. .TextJustify {
  23. margin-top: 24px;
  24. margin-left: 32px;
  25. border: 1px solid #ff6a00;
  26. width: 480px;
  27. text-align: justify;
  28. text-justify: distribute-all-lines;
  29. }

显示结果

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

360截图20181115101423160.jpg

代码示例2:

文本左对齐:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title></title>
  5. <meta charset="utf-8">
  6. <style type="text/css">
  7. .leftText{
  8. text-align:left;
  9. }
  10. </style>
  11. </head>
  12. <body>
  13. <div class="leftText">左对齐</div>
  14. </body>
  15. </html>

文本右对齐:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title></title>
  5. <meta charset="utf-8">
  6. <style type="text/css">
  7. .rightText{
  8. text-align:right;
  9. }
  10. </style>
  11. </head>
  12. <body>
  13. <div class="rightText">右对齐</div>
  14. </body>
  15. </html>

居中对齐:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title></title>
  5. <meta charset="utf-8">
  6. <style type="text/css">
  7. .centerText{
  8. text-align:center;
  9. }
  10. </style>
  11. </head>
  12. <body>
  13. <div class="centerText">居中对齐</div>
  14. </body>
  15. </html>

本篇文章到这里就全部结束了,更多关于文本对齐的内容大家可以关注Gxlcms的CSS视频教程栏目!!!

以上就是如何使用CSS实现文本左对齐、右对齐和居中对齐的详细内容,更多请关注Gxlcms其它相关文章!

人气教程排行