详解：35 text-align direction

最新推荐文章于 2022-06-06 09:27:14 发布

贵哥的编程之路(热爱分享)

最新推荐文章于 2022-06-06 09:27:14 发布

阅读量629

点赞数 1

分类专栏： CSS3最详解

本文链接：https://blog.csdn.net/qq_37805832/article/details/106773611

版权

CSS3最详解专栏收录该内容

54 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>text-align</title>
	<link rel="stylesheet" type="text/css" href="css/reset.css"/>
	<style type="text/css">
		p{
			border:1px solid red;
		}
		.test1{
			text-align:start;/*start默认就是左边的*/
		}
		.test2{
			text-align:left;/*left左对齐*/
		}
		.test3{
			direction: rtl;/*默认方向在左边，改成右边了呀*/
			text-align:start;/*所以开始因为默认是右边，所以start为右边*/
		}
		.test4{
			direction: ltr;/*默认开始（start）方向为左边*/
			text-align:end;/*那结束当然在右边啦，如果这里写的是start的话，就是左边了呀，哈哈，慢慢理解哈*/
			
		}
		.test5{
			text-align:right;/*右边*/
		}
		.test6{
			direction: rtl;/*默认开始为右边，*/
			text-align:end;/*因为开始是右边，所以结束当然为左边啦，，如果为start就为右边的呀*/
		}
		.test7{
			width: 400px;/*比起不用有一些两端对齐的效果哈，一小点，反正我看不到哈，哈哈哈*/
			text-align:justify;
		}
		.test8{
			width: 400px;/*在一行的情况下才用的哈，两端对齐，比起不用有一些细微的效果而已哈*/
			text-align:justify-all;
		}
	</style>
</head>
<body>
<p class="test1">this is a test,text-align:start,开始边界对齐</p>
<p class="test2">this is a test,text-align:left,左对齐</p>
<p class="test3">this is a test,text-align:start,右对齐</p>
<p class="test4">this is a test,text-align:end,结束边界对齐</p>
<p class="test5">this is a test,text-align:right,右对齐</p>
<p class="test6">this is a test,text-align:right,左对齐对齐</p>
<p class="test7">我是两端对齐this is a test我是两端对齐this is a test我是两端对齐this is a test我是两端对齐this is a test我是两端对齐this is a test我是两端对齐this is a test我是两端对齐this is a test我是两端对齐this is a test我是两端对齐this is a test</p>
<p class="test8">this is a test</p>

</body>
</html>

在这里插入图片描述

贵哥的编程之路(热爱分享)

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
详解：35 text-align direction

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>text-align</title> <link rel="stylesheet" type="text/css" href="css/reset.css"/> <style type="text/css"> p{ border:1px solid red;
复制链接

扫一扫