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

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了如何使用CSS实现文本左对齐、右对齐和居中对齐，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2415字，纯文字阅读大概需要4分钟。

内容图文

文本的位置在网页布局中是必不可少的，今天的这篇文章就来给大家分享关于使用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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="TextAlign.css" />
    <title></title>
    </head>
    <body>
  <div class="TextLeft">
    Gxl网左对齐<br />
    Gxl网<br />
    Gxl网<br />
    php
  </div>
  <div class="TextRight">
    Gxl网右对齐<br />
   Gxl网<br />
    Gxl网<br />
    php
  </div>
  <div class="TextCenter">
    Gxl网居中对齐<br />
    Gxl网<br />
    Gxl网<br />
    php
  </div>
  <div class="TextJustify">
    Gxl网<br />
    两端对齐<br />
    Gxl网<br />
    php
    </div>
    </body>
    </html>

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文件。将显示如下所示的效果。

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

代码示例2：

文本左对齐：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
.leftText{
  text-align:left; 
  }
	</style>
</head>
<body>
<div class="leftText">左对齐</div>
</body>
</html>

文本右对齐：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
.rightText{
  text-align:right; 
  }
	</style>
</head>
<body>
<div class="rightText">右对齐</div>
</body>
</html>

居中对齐：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
.centerText{
  text-align:center; 
  }
	</style>
</head>
<body>
<div class="centerText">居中对齐</div>
</body>
</html>

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

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

内容总结

以上是互联网集市为您收集整理的如何使用CSS实现文本左对齐、右对齐和居中对齐全部内容，希望文章能够帮你解决如何使用CSS实现文本左对齐、右对齐和居中对齐所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/410790.html

来源：【匿名】