上午說了CSS字型的顏色屬性，下午來說下字型的文字對齊text-align和文字裝飾text-decoration
text-align屬性用於設定元素內文字內容的
水平對齊
方式。語法規則如下：
div {
text-align：center；
}
除了有center屬性外，還有另外兩個屬性：
left 左對齊（預設值）
right 右對齊
先看下居中效果：
對應程式碼為：
<！
DOCTYPE
html
>
<
html
lang
=
“en”
>
<
head
>
<
meta
charset
=
“UTF-8”
>
<
meta
http-equiv
=
“X-UA-Compatible”
content
=
“IE=edge”
>
<
meta
name
=
“viewport”
content
=
“width=device-width， initial-scale=1。0”
>
<
title
>
Document
title
>
<
style
>
div
{
text-align
：
center
；
}
style
>
head
>
<
body
>
<
div
>
人保好，還是平安好呢？一個是央企，一個是巨頭
div
>
body
>
html
>
然後是文案左對齊，看下效果：
對應程式碼為：
<！
DOCTYPE
html
>
<
html
lang
=
“en”
>
<
head
>
<
meta
charset
=
“UTF-8”
>
<
meta
http-equiv
=
“X-UA-Compatible”
content
=
“IE=edge”
>
<
meta
name
=
“viewport”
content
=
“width=device-width， initial-scale=1。0”
>
<
title
>
Document
title
>
<
style
>
div
{
text-align
：
left
；
}
style
>
head
>
<
body
>
<
div
>
人保好，還是平安好呢？一個是央企，一個是巨頭
div
>
body
>
html
>
最後是右對齊，看下效果：
對應的程式碼為：
<！
DOCTYPE
html
>
<
html
lang
=
“en”
>
<
head
>
<
meta
charset
=
“UTF-8”
>
<
meta
http-equiv
=
“X-UA-Compatible”
content
=
“IE=edge”
>
<
meta
name
=
“viewport”
content
=
“width=device-width， initial-scale=1。0”
>
<
title
>
Document
title
>
<
style
>
div
{
text-align
：
right
；
}
style
>
head
>
<
body
>
<
div
>
人保好，還是平安好呢？一個是央企，一個是巨頭
div
>
body
>
html
>
如果不寫文字對齊的屬性，看下預設應該都是左對齊，效果如下：
對應程式碼為：
<！
DOCTYPE
html
>
<
html
lang
=
“en”
>
<
head
>
<
meta
charset
=
“UTF-8”
>
<
meta
http-equiv
=
“X-UA-Compatible”
content
=
“IE=edge”
>
<
meta
name
=
“viewport”
content
=
“width=device-width， initial-scale=1。0”
>
<
title
>
Document
title
>
<
style
>
/* div {
text-align： right；
} */
style
>
head
>
<
body
>
<
div
>
人保好，還是平安好呢？一個是央企，一個是巨頭
div
>
body
>
html
>
可以看到已經將text-align程式碼註釋掉了，預設展示就是左對齊
今天先到這裡，大家學習工作辛苦了~
