css实现两端文字对齐的方法

作者：Jasmine - 2020年09月15日

参考来源于css世界这本书,下面详细解析一下文字对齐的方法:

html

<div class="demo">
	<strong>居左对齐</strong>
	<p>这是一段临时想出来的文案，其中可能参杂了几个英文单词，例如CSS，例如JS等。</p>
	<strong>两端对齐</strong>
	<p class="justify">这是一段临时想出来的文案，其中可能参杂了几个英文单词，例如CSS，例如JS等。</p>
</div>

css:

.demo {
	max-width: 300px;
	font-size: 14px;
}

p {
	padding: 10px 20px;
	background-color: #f0f3f9;
}

.justify {
	text-align: justify;
	text-justify: inter-ideograph;
}

效果:

可以看到效果两个对比,下面一个已经两端对齐了,这个就是多行文字两端对齐方式.

还有如果是单行文字的呢,图片+文字形式,在容器中怎么两端对齐:

<ul class="justify-list">
	<li>
		<img src="1.jpg">
		<p>图标描述 1</p>
	</li>
	<li>
		<img src="1.jpg">
		<p>图标描述 2</p>
	</li>
</ul>

css

.demo {
	max-width: 300px;
	font-size: 14px;
}
p {
	padding: 10px 20px;
	background-color: #f0f3f9;
}
.justify {
	text-align: justify;
	text-justify: inter-ideograph;
}
.justify-list {
	width: 400px;
	background: #ccc;
	/* padding: 20px; */
	/*一行的情况使用text-align-last,兼容问题*/
	/* text-align-last: justify;*/
	text-align: justify;
	/* ie设置了font-size: 0;两端不能对齐 */
	/* font-size: 0;   */
	font-size: .1px;
	font-size: -webkit-calc(0px + 0px);
}
.justify-list::after {
	content: "";
	display: inline-block;
	width: 100%;
	vertical-align: bottom;
}
.justify-list li {
	display: inline-block;
	text-align: center;
	font-size: 14px;
}

.justify-list li img {
	width: 100px;

}

上面的样式是最后兼容谷歌跟ie的代码.

分析:

.justify-list{
text-align-last: justify;
}

这种上面那种多行文字对齐方式已经不适用了,然后使用了最后一行对齐方式text-align-last: justify;可以是可以,但是有兼容问题,Safari 浏览器，包括 Safari 10，都不支持，以至于移动端和桌面端都不能使用，甚是遗憾。

于是，我们只能寻求更加极客一点的技术手段，比方说，借助伪元素自动补一行。例如：

.justify-list{
    text-align: justify;
}
.justify-list:after {
    content: "";
    display: inline-table; /* 也可以是 inline-block */
    width: 100%;
}

这相当于强制创建一个“看不见”的元素，满足换行这个要求，实现第一行的两端对齐效果。从效果上看，确实两端对齐了，然而，列表下方似乎莫名多了一些高度.

效果:

上面的效果,其中也提供了修正手段，分为两点：一是容器设置 font-size:0，列表 font-size 再还原；二是辅助两端对齐的内联元素设置 vertical-align:top或 vertical-align:bottom。例如：

.justify-list{
    text-align: justify;
    font-size: 0;
}
.justify-list:after {
    content: "";
    display: inline-table;
    width: 100%;
    vertical-align: bottom;
}
.justify-list li {
    display: inline-block;
    font-size: 14px;
}

理论很完美，现实很残酷。在 IE 浏览器下，如果 font-size 设为 0，其样式表现就好像空格根本不存在一样，无法两端对齐。是不是再次失望了？后来，我经过尝试发现，我们可以设置font-size:.1px，设置字号 0.1 像素，IE 浏览器又认为空格存在了，同时间隙什么的都没有了，美哉！然而，Chrome 浏览器桌面浏览器有一个最小 12px 的 font-size 限制，设置字号 0.1 像素等同于设置字号 12px，此时 Chrome 浏览器间隙问题又出现了！是不是彻底绝望了？于是，我不得已使用了下面这种比较极客的方法进行处理：

.justify-list{
    text-align: justify;
    font-size: .1px;
    font-size: -webkit-calc(0px + 0px);
}

这样就可以完美解决谷歌跟ie的对齐问题了.

最后效果:

本文作者： Jasmine

本文链接： https://www.jianbaizhan.com/article/690

版权声明：本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！