【css】text-align:justify实现两端对齐
text-align
text-align 作用在 块级元素上,用来控制 块级元素 里 内联元素 的水平对齐方式。
有4个属性值。
left
内联元素左侧 与 块级元素左侧 对齐,即左对齐right
内联元素右侧 与 块级元素右侧对齐,即右对齐center
内联元素中心 与 块级元素中心 对齐,即居中对齐justify
内联元素左侧与块级元素左侧对齐,且内联元素右侧与块级元素右侧对齐, 即两端对齐
来直观地感受下。
.box{width:200px;height:100px;border:1px solid lightskyblue}
<body><div class="box">hello world</div>
</body>
问题
left
|right
|center
时,OK;但justify
时,文本“hello world”没有两端对齐。
我们让 文本长一点,“hello world hello world hello world hello world”。
这时 文本分两行了,且第一行的文本两端对齐了,但最后一行的文本没有两端对齐。
解决方法
既然最后一行没有两端对齐,那我们就想办法让最后一行对齐。
有两种解决方法。
第一种 text-align-last
.box{width:200px;height:100px;border:1px solid lightskyblue;text-align:justify;text-align-last:justify;}
text-align-last 也作用在 块级元素上,用来控制 块级元素内 最后一行 的对齐方式。
最后一行也是内联元素,像 文本、span 等 display 为 inline | inline-block 的元素。
有7个属性值。
left
最后一行左侧 与 内容盒子左侧 对齐,即左对齐right
最后一行右侧 与 内容盒子右侧 对齐,即右对齐center
最后一行中心 与 内容盒子中心 对齐,即居中对齐justify
最后一行左侧 与 内容盒子左侧对齐,最后一行右侧 与 内容盒子右侧对齐,即两端对齐auto
text-align值为left
,此时text-align-last:auto
相当于text-align-last:left
;
text-align值为right
,此时text-align-last:auto
相当于text-align-last:right
;
text-align值为center
,此时text-align-last:auto
相当于text-align-last:center
;
text-align值为justify
,text-align-last这会儿突然就傲娇了,不随text-align了。此时,text-align-last:auto
相当于text-align-last:start
;start
direction值为ltr
,此时text-align-last:start
相当于text-align-last:left
,左对齐;
direction值为rtl
,此时text-align-last:start
相当于text-align-last:right
,右对齐;end
direction值为ltr
,此时text-align-last:end
相当于text-align-last:right
,右对齐;
direction值为rtl
,此时text-align-last:end
相当于text-align-last:left
,左对齐;
我们重新回到问题。
此时的 text-align值为justify
,text-align-last值为auto
,direction值为ltr
,所以最终的效果是,最后一行左对齐,即最后的文本左侧 与 内容盒子左侧对齐,没毛病。
蓝色部分就是 内容盒子
第二种 使用伪元素
让伪元素成为最后一行。
.box{width:200px;height:100px;border:1px solid lightskyblue;text-align:justify;}.box:after{content:"";display:inline-block;width:100%;}
实例:两端对齐 等间隔
实例1
.container{list-style: none;margin:0;padding:0;width:300px;height:100px;border:1px solid lightskyblue;text-align:justify;text-align-last:justify;}.box{width:50px;height:inherit;background-color:lightblue;display:inline-block;}
<body>
<ul class="container"><li class="box"></li><li class="box"></li><li class="box"></li><li class="box"></li><li class="box"></li>
</ul>
</body>
实例2
.container{list-style: none;margin:0;padding:0;width:600px;border:5px solid rgb(241, 241, 217);background-color:#fff;text-align:justify;text-align-last:justify;}.content{display:inline-block;text-align:center;width:180px;}.note{text-align-last:center;}
<body><ul class="container"><li class="content"><img src="./imgs/路飞.jpg" alt="路飞"><div class="note">路飞</div></li><li class="content"><img src="./imgs/海贼王.jpg" alt="海贼王"><div class="note">海贼王</div></li> <li class="content"><img src="./imgs/船长.jpg" alt="船长"><div class="note">船长</div></li> </ul>
</body>
问题
<body><ul class="container"><li class="content"><img src="./imgs/路飞.jpg" alt="路飞"><div class="note">路飞</div></li><li class="content"><img src="./imgs/海贼王.jpg" alt="海贼王"><div class="note">海贼王</div></li> <li class="content"><img src="./imgs/船长.jpg" alt="船长"><div class="note">船长</div></li> <li class="content"><img src="./imgs/海贼王.jpg" alt="海贼王"><div class="note">海贼王</div></li> <li class="content"><img src="./imgs/船长.jpg" alt="船长"><div class="note">船长</div></li> </ul>
</body>
解决方法
一行有3列,所以使用3个空的标签来占位,<li class="content"></li>
。
<ul class="container"><li class="content"><img src="./imgs/路飞.jpg" alt="路飞"><div class="note">路飞</div></li><li class="content"><img src="./imgs/海贼王.jpg" alt="海贼王"><div class="note">海贼王</div></li> <li class="content"><img src="./imgs/船长.jpg" alt="船长"><div class="note">船长</div></li> <li class="content"><img src="./imgs/海贼王.jpg" alt="海贼王"><div class="note">海贼王</div></li> <li class="content"><img src="./imgs/船长.jpg" alt="船长"><div class="note">船长</div></li> <li class="content"></li><li class="content"></li><li class="content"></li></ul>
多出的高度是 幽灵节点捣的鬼!
将ul.container
的font-size
设置为0
,li.content
的font-size
设置为16px
即可。
综上,css样式如下:
.container{list-style: none;margin:0;padding:0;width:600px;border:5px solid rgb(241, 241, 217);background-color:#fff;text-align:justify;text-align-last:justify;font-size:0;}.content{display:inline-block;text-align:center;width:180px;font-size:16px;}.note{text-align-last:center;}
参考文章
text-align
text-align-last
【css】text-align:justify实现两端对齐相关推荐
- CSS实现多行文字两端对齐的效果
CSS实现多行文字两端对齐的效果 文章来源:本站原创 浏览次数:248 发布日期:2013-09-13 在做前台界面的时候,比如一些文字的列表或者一些表单的标题,经常是2个字,3个字,4个字的类型 ...
- html中单行文本,利用css实现单行文本文字两端对齐
日常使用中我们可以用 text-align: justify; 实现文本两端对齐效果. 但是该属性有一个问题,不支持单行文本的两端对齐,只有达到2行或者以上才会有效. 所以需要采用下面两种方法实现单行 ...
- css小技巧(文字两端对齐)
<label>姓名<i></i></label> label {display: inline-block;width: 100px;text-alig ...
- css3总结之: text-align: justify (两端对齐)
text-align: justify: 大家都知道 text-align 属性是规定元素中的文本的水平对齐方式,最常用的值是left.right.center,那么justify是什么呢? 在W3C ...
- html css text align,css – text-indent不起作用,而text-align:right
看起来保持对齐对于浏览器来说更重要,所以文本的正确边缘保持在右边,无论如何. 该文档设置为ltr方向,因此缩进应用于该行的左侧,但由于您已经表示要将其与右对齐,所以浏览器完全忽略该缩进.我没有解释为什 ...
- chrome css两端对齐,两端对齐布局与text-align:justify
百分比实现 首先最简单的是使用百分比实现,如下一个展示列表: .list{ width: %; background: #f0f0f9; list-style: none; font-size: ; ...
- display:inline-block+text-align:justify实现列表元素的两端对齐
display:inline-block+text-align:justify实现列表元素的两端对齐. 2011-09-21 08:49:22 display:inline-block+text-al ...
- html图片左右对齐,css如何让图片或者文字两端对齐
css原生的就支持图片或者文字两端对齐.两端对齐,在css布局中是很常见的.两端对齐,是子元素水平的,均匀的分布在父元素内 .css中使用两端对齐,使用的是 text-align-last:justi ...
- 表单title文字两端对齐(2、3、4个字都对齐)
表单title文字两端对齐(2.3.4个字都对齐) 文字两端对齐 元素两端对齐 <style type="text/css">.word1{letter-spacing ...
最新文章
- gram矩阵的性质_线性代数(十五)标准正交基(Orthonormal Bases)和Gram-Schmidt正交化...
- 【VS开发】Return与Exit的区别
- 完整mes代码(含客户端和server端_Ice简介+Qt代码示例
- ELK实时日志分析平台环境部署--完整记录
- C语言面试题分享(3)
- cnpm 网络不能连接_(二十七)通俗易懂理解——Resnet残差网络
- android设置大小能用小数,Android中关于保留小数点位数的处理
- Java对PHP服务器hmac_sha1签名认证方法的匹配实现
- 求最长不下降序列(信息学奥赛一本通-T1259)
- MVC HtmlHelperTModel 类
- 有哪些让程序员受益终生的建议
- .NET单元测试(四):用例设计
- 圣思园【深入JVM】笔记-第一课-论学习方法
- C# 将word/ppt文档转换为Pdf的三种方法
- 【R语言 | 如何绘制带组内差异比较的柱形图】
- attention方式的算法
- 最优化方法之黄金分割法,为什么是0.618?
- 240. 搜索二维矩阵 II
- 云计算-7-Dockerfile深度解析CMD和ENTRYPOINT指令
- 别管哪条公链了,你听过数字恐龙吗?