css如何文本向左对齐

发布网友发布时间：2022-04-22 06:51

共5个回答

懂视网时间：2022-04-28 17:42

文本的位置在网页布局中是必不可少的，今天的这篇文章就来给大家分享关于使用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">
 Gxlcms左对齐<br />
 Gxlcms<br />
 Gxlcms<br />
 php
 </div>
 <div class="TextRight">
 Gxlcms右对齐<br />
 Gxlcms<br />
 Gxlcms<br />
 php
 </div>
 <div class="TextCenter">
 Gxlcms居中对齐<br />
 Gxlcms<br />
 Gxlcms<br />
 php
 </div>
 <div class="TextJustify">
 Gxlcms<br />
 两端对齐<br />
 Gxlcms<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文件。将显示如下所示的效果。

360截图20181115101423160.jpg

代码示例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>

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

热心网友时间：2022-04-28 14:50

文本居左对齐，两端对齐，靠右对齐，或者说居中对齐，通用一个属性：text-align

text-align参数值与说明：

left：内容左对齐。
center：内容居中对齐。
right：内容右对齐。
justify：内容两端对齐，但对于强制打断的行（被打断的这一行）及最后一行（包括仅有一行文本的情况，因为它既是第一行也是最后一行）不做处理。（CSS3）
start：内容对齐开始边界。（CSS3）
end：内容对齐结束边界。（CSS3）
match-parent：这个值和 inherit 表现一致，只是该值继承的 start 或 end 关键字是针对父母的 <' direction '> 值并计算的，计算值可以是 left 和 right 。（CSS3）
justify-all：效果等同于 justify，但还会让最后一行也两端对齐。（CSS3）

语法扩展：

这里需要注意的一点是：设置或检索对象中内容的水平对齐方式。

1、块级元素的文本是一些堆叠的线框

2、大部分浏览器要使得 <' text-align '> 的justify两端对齐生效，需要在汉字间插入有空白，如空格；

3、块内的最后一行文本（包括块内仅有一行文本的情况，这时既是第一行也是最后一行）及被强制打断的行，其两端对齐需使用 <' text-align-last '>；

4、IE浏览器下，如果 <' text-align-last '> 要生效，必须先定义 <' text-align '> 为justify；

热心网友时间：2022-04-28 16:08

文本向左对其的属性是，text-align:left;但是你说其他都显示正常，就文本跑到左边，你要看看包住文本的标签或者文本标签的父标签有没有左浮动float:left;如果有你就清除掉clear:left;
希望能解决你的问题

热心网友时间：2022-04-28 17:43

"就文本跑到左边去了我要向左对齐"??
就文本跑到左边去了那不就是左对齐了吗？
左对齐的代码是text-align:left
如果html代码是这样的
<p>文本</p>
那css代码这样写
p{text-align:left;}
这样就可以了

热心网友时间：2022-04-28 19:34

text-align:left;

全部栏目

css如何文本向左对齐