Code directly
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>text-align</title>
<style>
/* 用在块级元素 或者 行内块元素中
text-align 可选值 默认值：由浏览器决定 。
left 把文本排列到左边。
right 把文本排列到右边。
center 把文本排列到中间。
justify 实现两端对齐文本效果。
inherit 谷歌浏览器默认值
*/
body {
padding: 50px
}
</style>
</head>
<body>
<!-- -->
<div style="text-align: center;">居中</div>
<div style="text-align: left;">左对齐</div>
<div style="text-align: right;">右对齐</div>
<!-- 常规布局 -->
<div style="width:200px;height:300px;border: 1px solid red">
该属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式。通过允许用户代理调整行内容中字母和字之间的间隔，可以支持值 justify；不同用户代理可能会得到不同的结果。</div>
<!-- 两端对齐 -->
<div style="width:200px;height:300px;text-align: justify;border: 1px solid red">
该属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式。通过允许用户代理调整行内容中字母和字之间的间隔，可以支持值 justify；不同用户代理可能会得到不同的结果。</div>
<div style="text-align:center">
<div>规定应该从父元素继承 text-align 属性的值。</div>
</div>
</body>
</html>
effect
