您的位置:首页 - 教程 - CSS - 正文
CSS文字两端对齐

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元素,并应用样式。另外,对于中文还必须用空格隔开汉字,否则也没有两端对齐的效果。英文每个单词都有空格隔开,所以没问题。


评论: