css原生的就支持图片或者文字两端对齐。两端对齐，在css布局中是很常见的。两端对齐，是子元素水平的，均匀的分布在父元素内 。css中使用两端对齐，使用的是 text-align-last:justify 。 之前没怎么使用过两端对齐，之前一直用浮动或者inline-block加宽度来模拟两端对齐， 这里记录一下如何使用text-align-last:justify实现两端对齐。
首先需要理解 text-align 控制的是，子元素的对齐方式，并且子元素不能是块元素。text-align的值是justify的时候， 对最后一行是没有效果的。 而 text-align-last 就是针对最后一行。所以就可以用justify。至于为什么 text-align对最后一行没有效果，想想这样的行为是挺合理的。因为文字两端对齐的时候，最后一行，只有几个文字的时候，最后一行的文字的间距就太大了，不好看。当然这是我猜测的。
css文字两端对齐的示例
css 代码
.father {
display: block;
outline: 1px solid red;
text-align-last: justify;
}
.son {
display: inline;
outline: 1px solid blue;
}
html 代码
123
显示的效果
三个子元素始终两端对齐
css图片两端对齐的示例
css
.father {
display: block;
outline: 1px solid red;
text-align-last: justify;
overflow: hidden;
}
.son {
display: inline;
outline: 1px solid blue;
}
img {
vertical-align: bottom;
}
html
显示的效果
css图片两端对齐
需要注意得 vertical-align: bottom 可以防止出现一个透明的底空白。
css图片两端对齐 图片底部有透明的空白
