首页 > Web开发 > 详细

CSS文字两端对齐

时间:2016-06-16 20:08:29      阅读:291      评论:0      收藏:0      [点我收藏+]

HTML:

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<style>


.justify {
border: 1px solid blue;
width: 200px;
height: 18px;
font-size: 15px;
color: red;
text-align: justify;
}

.justify span {
display: inline-block;
padding-left: 100%;
}


</style>
</head>

<body>


<div class="justify">hello, text justify.</div>
<br/>

<div class="justify"> hello, text justify.<span></span></div>
<br/>

<div class="justify">中 文 两 端 对 齐</div>
<br/>

<div class="justify">中 文 两 端 对 齐<span></span></div>


</body>

</html>

result:

技术分享

 

总结:从效果图可以看到,除了要在块级元素加text-align:justify样式外,还需要在里面加一个空的span元素,并应用样式。另外,对于中文还必须用空格隔开汉字,否则也没有两端对齐的效果。英文每个单词都有空格隔开,所以没问题。

 

CSS文字两端对齐

原文:http://www.cnblogs.com/theWayToAce/p/5591981.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!