text-align 的用法
定義與語法
text-align屬性是用來描述一個行內元素是如何在身為父元素的塊級元素中對齊
通過定義可以看出text-align屬性并不能控制塊級元素的對齊方式，它只對塊級元素內的行內元素生效
來看看text-align屬性有哪些值
left
right
center
justify
start (CSS3新增) （默認值）
end (CSS3新增)
match-parent (CSS3新增)
接下來看看語法
# 內容左對齊text-align: left;# 內容右對齊text-align: right;# 內容居中對齊text-align: center;# 內容兩端對齊，但對于強制打斷的行（被打斷的這一行）及最后一行（包括僅有一行文本的情況，因為它既是第一行也是最后一行）不做處理text-align: justify;# CSS3 內容對齊開始邊界text-align: start;# CSS3 內容對齊結束邊界text-align: end;# CSS3 這個值和inherit表現一致，只是該值繼承的start或end關鍵字是針對父母的direction值并計算的，計算值可以是left和righttext-align: match-parent;
其實text-align屬性的值leftrightcenter已經很熟悉了，下面來重點看看justify
justify
首先明確的是，這個對齊的方式在英文文本上的表現效果更強一點，因為英文是一個個詞匯，有長有短，像中文這種方塊字都差不多的，設置內容兩端對齊很難看出效果
來看看兩端對齊的效果實現
HTML
This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. This paragraph contains a very long word
CSS
.mydiv{width:120px;border:3pxsolid red;text-align: justify;}
其實，僅需聲明text-align-last: justify;便可設置最后一行也兩端對齊
start和end (CSS3新增)
直接上例子吧
HTML
CSS
.test.start{border:2pxsolid red;text-align: start;}.test.end{border:2pxsolid red;text-align: end;}
好吧，我并沒有看出和left和right有什么區別，以后發現了再補充吧
對行內元素的實現效果
text-align對塊級元素內的文本是有效果的，那么對行內元素本身有效果么
HTML
CSS
.mydiv{width:400px;height:30px;border:2pxsolid red;}span{padding-left:15px;padding-right:15px;background:#ccc;border:1pxsolid;}.left{text-align: left;}.right{text-align: right;}.center{text-align: center;}.justify{text-align-last: justify;}
嗯，效果和文本的對齊方式是一樣的...我靠，一樣個毛線啊，justify明顯沒有效果好么
細分析下來這個會不會是span之間沒有空格，就跟英文單詞一樣，瀏覽器渲染會認為這三個span是一體的，那就試試吧，給span間加兩個空格
HTML
還真是
再來，加空格可以，設置margin可以么，很可惜，親測不行
對inline-block的實現效果
相同的例子，行內元素換成塊級元素，對塊級元素設置display: inline-block;
HTML
CSS
.mydiv{width:400px;height:30px;border:2pxsolid red;}p{display: inline-block;padding:5px;vertical-align: top;border:1pxsolid;background:#ccc;}.left{text-align: left;}.right{text-align: right;}.center{text-align: center;}.justify{text-align-last: justify;}
看看，效果相同，并且好像發現了一個新東西，inline-block后的塊級元素不用加空格就可以實現justify的效果
其實，那是因為inline-block后的塊級元素本身有間隙，具體可以參考我的另一篇文章《消除inline-block后間隙的方法們》
鏈接：https://www.jianshu.com/p/50ef0d1988de
來源：
text align是什么意思
text align
文本對齊
text 英[tekst] 美[tɛkst]
n. 文本，原文; 課文，教科書; 主題; 版本;
v. 發短信;
[例句]The text is preci and informative.
正文內容準確，信息量大。
align 英[əˈlaɪn] 美[əˈlaɪn]
vt. 使成一線，使結盟; 排整齊;
vi. 排列; 成一條線;
[例句]There are signs that the prime minister is aligning himlf with the liberals
有跡象表明首相正在與自由黨人結盟。
text-align:center什么意思
text-align 屬性規定HTML元素中的文本的水平對齊方式。
text-align：center 就是把HTML元素中的文本排列到中間的意思。
text-align：left 就是把HTML元素中的文本排列到左邊的意思。
text-align：right 就是把HTML元素中的文本排列到右邊的意思。
text-align：justify 實現兩端對齊文本效果。
text-align：inherit 規定應該從父元素繼承 text-align 屬性的值。
擴展資料：
text-align:center運用的實例代碼：
<html>
<head>
<title>text-align</title>
</head>
<body>
<p style="text-align:left;">文本向左</p>
<p style="text-align:right;">文本向右</p>
<p style="text-align:center;">文本居中</p></body>
</html>
text-align 和 align的區別
align
：規定
div
元素中的內容的水平對齊方式。
text-align：規定“元素中”的文本的水平對齊方式。
兩個屬性使用的地方不一樣的！
<div
align="center">
This
is
some
text!
</div>
align直接寫在是div的屬性
<div
style="text-align:center">
text-align則是Css的屬性
在
XHTML
1.0
Strict
DTD
中，不支持
div
元素的
align
屬性。
請使用
CSS
代替。
vertical-align和text-align區別
text-align 是設置或檢索對象中文本的左中右對齊方式。
vertical-align 是用于指定元素的上下垂直對齊方式。
如果要實現水平居中，比如我們要實現塊狀元素(block)內，子元素的水平居中
比如我們要實現div2元素在父元素div1內的居中，我們則會有：
并且要設置父元素的屬性即：
實現效果為：
關鍵：要實現這種水平居中，在設置父元素具有 text-align:center 屬性的基礎上，必須設置子元素（要居中的元素）的 display:inline-block 或者 display:inline ，即只能實現行內塊的水平居中。
（2） vertical-align
這里簡單的說一下， vertical-align 屬性實現垂直居中
要實現div1父元素內的子元素div2，讓div2實現垂直居中，我們可以這樣設置：
實現的效果為：
注：簡單的實現垂直居中，我們可以發現并不需要對子元素進行特殊設置，我們只需要設置父元素的
display:table-cell;vertical-align:middle 之后就能實現垂直方向的居中。（這種方式實現的垂直居中，會導致水平不居中）
W3C上對 vertical-align 的定義： vertical-align 屬性設置元素的垂直對齊方式。該屬性定義行內元素的基線相對于該元素所在行的基線的垂直對齊。允許指定負長度值和百分比值。這會使元素降低而不是升高。在表單元格中，這個屬性會設置單元格框中的單元格內容的對齊方式。第一種用法，先看后面一句“在表單元格中，這個屬性會設置單元格框中的單元格內容的對齊方式。”這很容易理解，如果給一個表格的td加一個 vertical-align:middle 的樣式，表格里面的內容會垂直居中，同樣的如果給一個 vertical-align:bottom 就會底部對齊，如果給一個 vertical-align:top 就會頂部對齊。
第二種用法，看前頁一句“該屬性定義行內元素的基線相對于該元素所在行的基線的垂直對齊。”專業的語言我不會說的，可以打個比喻：假設有兩個行內元素a和b，a和b都是img，當a加了一個 vertical-align:middle 樣式之后，b的底部（基線）就會對齊a的中間位置，如下圖：
如果a和b都加了一個 vertical-align:middle 樣式，那么就互相對齊了對方的中間位置，也就是它們在垂直方向上的中線對齊了，如下圖：
理應知道 vertical-align 可以設 middle,top,bottom 等等，甚至可以設置具體的值或百分比。
（1）text-align
(3)補充
1.父元素設置屬性為 text-align:center ,并設置子類快為 inline-block 那么，子類3個塊都會實現水平居中
2.父元素設置為 line-height:= height: 并設置子類塊屬性為inline-block，那么子類的所有都能實現垂直居中
3.對于 text-align:center ,如果父類元素的 display:inline-flex ，則子元素不能實現水平居中 line-height:100px 設置行高，此時給定了基線，此時如果要實現居中，只需要讓基線居中，通過設置 vertical-align:middle
