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>

显示的效果

css图片两端对齐
css图片两端对齐

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

css图片两端对齐 图片底部有透明的空白
css图片两端对齐 图片底部有透明的空白

回复

邮箱地址不会被公开。