CSS教程:水平对齐(text-align)

作者佚名技术来源 CSS技术浏览发布时间 2012-03-05

设定文本的水平对齐方式。但是在IE中，对齐会应用在此元素内所有的子孙元素上，例如有如下代码：
<div id="textAlign3" style="text-align:center;">
<p style="width:70%;">本段落会在IE内居中显示，而在Firefox和Opera内居左显示。</p>
</div>

　　其在Windows IE 6.0、Firefox 2.0和Opera 8.5中显示的效果如图6所示。
/web/css/text/img/text-align_06.gif

图6 不同浏览器的差别

　　读者可以看到，<p>元素本身也居中显示了，因此可以利用此特性来设置页面内容在IE内的整体居中效果，例如有html结构如下：
<body>
  <div id=”wrap”>
    <h1>页面居中</h1>
    <p>设置CSS使页面整体居中。</p>
</div>
</body>

　　要使<div id=” wrap”>在浏览器内居中，则需要设置CSS如下：
body {
text-align: center;  /* 在IE内居中 */
}
#wrap {
width: 90%;  /* 设定宽度才能显示出居中的效果。*/
margin: 0 auto;  /* 在Firefox及Opera等浏览器内居中。*/
}

　　此时在浏览器内浏览，页面内的元素都将居中显示，如图7所示。
/web/css/text/img/text-align_07.gif

图7 浏览器内页面整体居中

　　注意：此时页面内所有的文本都继承<body>的的设定而居中显示，因此实际应用中，可以再设定wrap层的对齐方式为左对齐。

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!

上一页 1 2

分享到：更多

你可能对下面的文章感兴趣

上一篇: 多个CSS样式表争夺特定选择符的控制权下一篇: 网页设计关于WEB标准的相关问题汇总

关于CSS教程:水平对齐(text-align)的所有评论

随机推荐