2018-10-12（文字垂直居中&两端对齐）

一，文字垂直居中vertical-align:middle;

1.为什么没效果呢？

one.png

two.png

因为vertical-align属性只对行内元素有效

2.为什么设置(display:inline-block;)还是没效果呢？

yi.png

er.png

因为将只是将对象呈递为内联对象，但是对象的内容还是作为块对象呈递。说的通俗点，就是你设置的当前div属性还是块对象呈递，但是允许同一级别的div在同一行内，也可以设置宽度和高度！

3.设置display:table-cell，将块元素转化为单元格

2.png

3.png

二，文字两端对齐(text-align:justify)

注意：text-align不会处理被打断的行和最后一行。如果文字只占了一行，也就是最后一行了，text-align设置为justify不会产生任何效果

1.png

tu.png

解决办法：

1.加span空标签

span是inline-block，设置宽度100%，那么这个时候span+文字的宽度就超过行盒了，浏览器会将其拆成两行。

one.png

two.png

2.加after

3.png

two.png

参考链接（https://www.cnblogs.com/tangchangcai/p/7774056.html ）
参考链接（https://blog.csdn.net/zhuobin_tian/article/details/70169664）