逼自己说几句
我就头疼这个text-align，因为每次拼写比写错，也是没谁了，在这里我就不把错的写出来了，惩罚自己手写十遍text-align
text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align
定义与语法
text-align属性是用来描述一个行内元素是如何在身为父元素的块级元素中对齐
通过定义可以看出text-align属性并不能控制块级元素的对齐方式，它只对块级元素内的行内元素生效
来看看text-align属性有哪些值
- left
- right
- center
- justify
- start (CSS3新增) （默认值）
- end (CSS3新增)
- match-parent (CSS3新增)
接下来看看语法
# 内容左对齐
text-align: left;
# 内容右对齐
text-align: right;
# 内容居中对齐
text-align: center;
# 内容两端对齐，但对于强制打断的行（被打断的这一行）及最后一行（包括仅有一行文本的情况，因为它既是第一行也是最后一行）不做处理
text-align: justify;
# CSS3 内容对齐开始边界
text-align: start;
# CSS3 内容对齐结束边界
text-align: end;
# CSS3 这个值和inherit表现一致，只是该值继承的start或end关键字是针对父母的direction值并计算的，计算值可以是left和right
text-align: match-parent;
其实text-align属性的值left right center已经很熟悉了，下面来重点看看justify
justify
首先明确的是，这个对齐的方式在英文文本上的表现效果更强一点，因为英文是一个个词汇，有长有短，像中文这种方块字都差不多的，设置内容两端对齐很难看出效果
来看看两端对齐的效果实现
HTML
<div class="mydiv">This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. This paragraph contains a very long word</div>
CSS
.mydiv {
width: 120px;
border: 3px solid red;
text-align: justify;
}
其实，仅需声明text-align-last: justify;便可设置最后一行也两端对齐
start和end (CSS3新增)
直接上例子吧
HTML
<ul class="test">
<li>
<strong>start</strong>
<p class="start">start效果</p>
</li>
<li>
<strong>end</strong>
<p class="end">end效果</p>
</li>
</ul>
CSS
.test .start {
border: 2px solid red;
text-align: start;
}
.test .end {
border: 2px solid red;
text-align: end;
}
好吧，我并没有看出和left和right有什么区别，以后发现了再补充吧
对行内元素的实现效果
text-align对块级元素内的文本是有效果的，那么对行内元素本身有效果么
HTML
<div class="mydiv left">
<span></span>
<span></span>
<span></span>
</div>
<div class="mydiv right">
<span></span>
<span></span>
<span></span>
</div>
<div class="mydiv center">
<span></span>
<span></span>
<span></span>
</div>
<div class="mydiv justify">
<span></span>
<span></span>
<span></span>
</div>
CSS
.mydiv {
width: 400px;
height: 30px;
border: 2px solid red;
}
span {
padding-left: 15px;
padding-right: 15px;
background: #ccc;
border: 1px solid;
}
.left {
text-align: left;
}
.right {
text-align: right;
}
.center {
text-align: center;
}
.justify {
text-align-last: justify;
}
嗯，效果和文本的对齐方式是一样的...我靠，一样个毛线啊，justify明显没有效果好么
细分析下来这个会不会是span之间没有空格，就跟英文单词一样，浏览器渲染会认为这三个span是一体的，那就试试吧，给span间加两个空格
HTML
<div class="mydiv justify">
<span></span>
<span></span>
<span></span>
</div>
还真是
再来，加空格可以，设置margin可以么，很可惜，亲测不行
对inline-block的实现效果
相同的例子，行内元素换成块级元素，对块级元素设置display: inline-block;
HTML
<div class="mydiv left">
<p></p>
<p></p>
<p></p>
</div>
<div class="mydiv right">
<p></p>
<p></p>
<p></p>
</div>
<div class="mydiv center">
<p></p>
<p></p>
<p></p>
</div>
<div class="mydiv justify">
<p></p>
<p></p>
<p></p>
</div>
CSS
.mydiv {
width: 400px;
height: 30px;
border: 2px solid red;
}
p {
display: inline-block;
padding: 5px;
vertical-align: top;
border: 1px solid;
background: #ccc;
}
.left {
text-align: left;
}
.right {
text-align: right;
}
.center {
text-align: center;
}
.justify {
text-align-last: justify;
}
看看，效果相同，并且好像发现了一个新东西，inline-block后的块级元素不用加空格就可以实现justify的效果
其实，那是因为inline-block后的块级元素本身有间隙，具体可以参考我的另一篇文章《消除inline-block后间隙的方法们》
参考文献
（完）
文档信息
- 自由转载-非商用-非衍生-保持署名
- 发表日期：2016年9月17日
网友评论