实例方式学CSS text-align怎么用

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

示。</p> </div>

其在Windows IE 6.0、Firefox 2.0和Opera 8.5中显示的效果如图6所示。

实例方式学CSS text-align怎么用
图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所示。

实例方式学CSS text-align怎么用
图7 浏览器内页面整体居中

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

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

上一页 1 2

分享到：更多

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

上一篇: IE和Firefox浏览器CSS网页布局不同点下一篇: CSS3教程:新增加的结构伪类

关于实例方式学CSS text-align怎么用的所有评论

随机推荐