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
