ext-align属性可以设置内联或者文本在其父元素内的对齐方式，应用非常频繁。
最为常用的属性值有三个，分别是left、center和right。
还有一个在某些场景下非常好用的属性值justify，它可以设置文本或者内联元素两端对齐。
在应用中，很多朋友可能会发现，此属性值有时候生效，有时候不生效。
下面通过代码实例介绍一下出现此问题的原因，以及解决方案。
首先看一段代码实例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.cxvn..com/" />
<title>text-align:justify 两端对齐</title>
<style type="text/css">
*{
margin:0;
padding:0;
border:0;
}
div {
width:300px;
height:50px;
background:#ccc;
}
div:first-child{
text-align:justify;
}
</style>
</head>
<body>
<div>乐分享 – 让开发更简单</div>
<div>乐分享 – 让开发更简单</div>
</body>
</html>

第一个div采用两端对齐方式，第二个是默认。
可以看到第一个div实现了两端对齐，第一行右侧没有空隙，第二个div第一行右侧空隙明显。
毫无疑问，justify属性值生效了，但是很多时候，此属性值并不生效，代码实例如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.cxvn.com/" />
<title>text-align:justify 两端对齐</title>
<style type="text/css">
*{
margin:0;
padding:0;
border:0;
}
div {
width:300px;
height:50px;
background:#ccc;
text-align:justify;
}
</style>
</head>
<body>
<div>乐分享 – 让开发更简单</div>
</body>
</html>

虽然为div元素设置了text-align:justify，但是并没有实现两端对齐效果。
因为此属性值对于最后一行无效，单行文本虽然是第一行，但也是最后一行，所以不生效。
解决方案非常简单，添加如下CSS属性即可：

text-align-last: justify;

从属性的名称来看，它用来规定最后一行是否具有两端对齐效果。
添加上述属性之后，效果肯定是好用的，本文不再演示，但是有一个小的缺陷，那就是低版本IE浏览器不支持，虽然当前已不是什么大问题，毕竟低版本IE用户已经很少了， 如果想做到机智，那么可以采用如下方式兼容，代码修改如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.cxvn.com/" />
<title>text-align:justify 两端对齐</title>
<style type="text/css">
*{
margin:0;
padding:0;
border:0;
}
div {
width:300px;
height:50px;
background:#ccc;
text-align:justify;
text-align-last: justify;
}
div:after {
content:’.’;
width: 100%;
display: inline-block;
overflow: hidden;
height: 0;
}
</style>
</head>
<body>
<div>乐分享 – 让开发更简单</div>
</body>
</html>

既然最后一行不生效，那么我们通过伪元素选择器:after再添加一行。
那么原来的文本就不再是最后一行，于是实现了浏览器全兼容效果。
此属性在某些效果中非常好用，比如表单文本框前面的前面的名称两端对齐会更加美观。
代码实例如下：

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.cxvn.com/" />
<title>text-align:justify 两端对齐</title>
<style>
span{
float: left;
width: 100px;
text-align: justify;
text-align-last: justify;
}
input{
width: 100px;
}
</style>
</head>
<body>
<div>
<span>姓名</span>：<input type="text"><br><br>
<span>电子邮箱</span>：<input type="email">
</div>
</body>
</html>

是不是实现上述效果曾经困扰过一些朋友，采用text-align:justify可以轻松实现。

1.《css教程之text-align:justify 两端对齐》援引自互联网，旨在传递更多网络信息知识，仅代表作者本人观点，与本网站无关，侵删请联系页脚下方联系方式。

2.《css教程之text-align:justify 两端对齐》仅供读者参考，本网站未对该内容进行证实，对其原创性、真实性、完整性、及时性不作任何保证。

3.文章转载时请保留本站内容来源地址，https://www.cxvn.com/study/224.html