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;
}
好看的css代码
html
显⽰的效果
css图⽚两端对齐
需要注意得 vertical-align: bottom 可以防⽌出现⼀个透明的底空⽩。
css图⽚两端对齐 图⽚底部有透明的空⽩

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。