1.text-align:属性
-
text-align属性定义行内内容（例如文字）如何相对它的块父元素对齐。text-align并不控制块元素自己的对齐，只控制它的行内内容的对齐。 -
text-align的属性值常用的有：right，left，center（行内内容居中），justify（向两侧对齐，最后一行无效），justify-all（与justify一致，强制最后一行两端对齐）等
2. text-align的代码实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>text-align用法</title>
<style>
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
</style>
</head>
<body>
<h1>CSS text-align 实例</h1>
<p class="date">2015 年 3 月 14 号</p>
<p class="main">“当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。”</p>
<p><b>注意：</b> 重置浏览器窗口大小查看 "justify" 是如何工作的。</p>
</body>
</html>
结果
center，right，justify:实例代码链接
3. text-align: justify 套路
将text-align: justify 用在表单中，将文本对齐。
未对齐效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
span{
width: 100px;
text-align: justify;
float: left;
/*border: 1px solid red;*/
overflow: hidden;
}
span:after{
content:'';
width: 100%;
display: inline-block;
height: 0;
/* border: 1px solid green;*/
}
input{
width: 100px;
}
</style>
</head>
<body>
<div class="demo">
<span>昵称</span>：<input type="text" style = 'width: 100px'><br><br>
<span>电子邮箱</span>：<input type="email" style = 'width: 100px;'>
</div>
</body>
</html>
对齐效果
代码链接
