1.text-align:屬性
-
text-align屬性定義行內(nèi)內(nèi)容（例如文字）如何相對它的塊父元素對齊君账。text-align并不控制塊元素自己的對齊，只控制它的行內(nèi)內(nèi)容的對齊驰吓。 -
text-align的屬性值常用的有：right，left系奉，center（行內(nèi)內(nèi)容居中）檬贰，justify（向兩側(cè)對齊，最后一行無效）缺亮，justify-all（與justify一致翁涤，強(qiáng)制最后一行兩端對齊）等
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">“當(dāng)我現(xiàn)在躺在床上，行將就木時萌踱，我突然意識到：如果一開始我僅僅去改變我自己葵礼，然后，我可能改變我的家庭并鸵；在家人的幫助和鼓勵下鸳粉，我可能為國家做一些事情；然后园担，誰知道呢?我甚至可能改變這個世界届谈。”</p>
<p><b>注意：</b> 重置瀏覽器窗口大小查看 "justify" 是如何工作的弯汰。</p>
</body>
</html>
結(jié)果
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>
對齊效果
代碼鏈接
