css text-align 对齐
2015-07-17 12:53
621 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>text-align</title>
<script src="jquery-1.8.2.js" type="text/javascript"></script>
<style>
.left{text-align:left;}
.right{text-align:right;}
.justify{
/*text-align:justify;*/
text-justify:inter-ideograph;
}
.center{text-align:center}
</style>
<script>
$(function(){
$("#operate").change(function(){
$("#target").removeAttr("class");
$("#target").attr("class",$(this).val());
});
});
</script>
</head>
<body>
<div id="target" style="width:200px;height:500px;border:1px solid;">
想飞上天<br />
和太阳肩并肩<br />
世界等着我去改变<br />
想做的梦<br />
从不怕别人看见<br />
在这里我都能实现<br />
大声欢笑让你我肩并肩<br />
何处不能欢乐无限<br />
抛开烦恼<br />
勇敢的大步向前<br />
我就站在舞台中间<br />
我相信我就是我<br />
我相信明天<br />
我相信青春没有地平线
</div>
<br />
<select id="operate">
<option></option>
<option value="center">居中对齐</option>
<option value="left">左对齐</option>
<option value="right">右对齐</option>
<option value="justify">两端对齐</option>
</select>
</body>
</html>要测试的看官请下载jquery1.8.2放于该页面同一文件夹下即可
justify有浏览器兼容问题，木有效果自行研究...
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 