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> 重置浏览器窗口大小查看 &quot;justify&quot; 是如何工作的。</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>