css如何让图片或者文字两端对齐

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 代码

<div class="father">
    <div class="son">1</div>
    <div class="son">2</div>
    <div class="son">3</div>
</div>

显示的效果

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

<div class="father">
    <div class="son"><img src="senlin.png"  alt="#"/></div>
    <div class="son"><img src="senlin.png"  alt="#"/></div>
    <div class="son"><img src="senlin.png"  alt="#"/></div>
</div>

显示的效果

需要注意得 vertical-align: bottom 可以防止出现一个透明的底空白。