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

发布时间：2020-07-10 15:07:07 阅读：450 作者：Leah 栏目：web开发

前端开发者测试专用服务器限时活动，0元免费领，库存有限，领完即止！点击查看>>

本篇文章给大家分享的是有关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">
    亿速云左对齐<br />
    亿速云<br />
    亿速云<br />
    php
  </div>
  <div class="TextRight">
    亿速云右对齐<br />
   亿速云<br />
    亿速云<br />
    php
  </div>
  <div class="TextCenter">
    亿速云居中对齐<br />
    亿速云<br />
    亿速云<br />
    php
  </div>
  <div class="TextJustify">
    亿速云<br />
    两端对齐<br />
    亿速云<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>

以上就是CSS如何实现文本左对齐、右对齐和居中对齐，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。

亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>

向AI问一下细节

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

猜你喜欢

最新资讯

相关推荐

开发者交流群：

相关标签