html图片左右对齐,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 代码

1

2

3

显示的效果

三个子元素始终两端对齐

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图片两端对齐 图片底部有透明的空白