详解: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;
		}
		.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>

在这里插入图片描述

©️2020 CSDN 皮肤主题: 数字20 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值