WEB标准中元素水平居中方案总结

2019-04-01 中国设计秀 佚名 点击: 评论
水平居中任意元素的首选办法是使用边界(margin)性质(property),并把左右之值设置为auto。但你必须为 container指定一个宽度。

天晟网络 小编在整理设计教程 > web设计 > 看到WEB标准中元素水平居中方案总结,下面是小编26为您找到的16702相关内容,希望26对您有帮助。

先来看我一个简单XHTML/HTML文件代码(部分),我们的目的是让#container水平居中。

<body>

<div id="container">

<h1>content</h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>

</div>

</body>使用自适应边界(auto margin)

水平居中任意元素的首选办法是使用边界(margin)性质(property),并把左右之值设置为auto。但你必须为#container指定一个宽度。

div#container {

margin-left: auto;

margin-right: auto;

width:168px;

}

这个方案在任何当代浏览器上都有效,即使是IE6,前提是在web标准兼容模式下(compliance mode)。不幸的是,它不会在先前版本的IE/Win中工作。我们为此列一个表格:浏览的自适应边界支持一览表浏览器版本支持

Internet Explorer 6.0, compliance mode 是

Internet Explorer 6.0, quirks mode 否

Internet Explorer 5.5 Windows 否

Internet Explorer 5.0 Windows 否

Internet Explorer 5.2 Macintosh 是

Mozilla 所有当前版本 是

Mozilla Firefox 所有版本 是

Netscape 4.x 否

Netscape 6.x+ 是

Opera 6.0, 7.0 Macintosh and Windows 是

Safari 1.2 是

尽管受到浏览器支持的限制,大部分设计师还是提倡你尽可能这样做。但我们依然可以使用CSS应付一切情况。使用文本排列(text-align)此方案需要使用到text-align性质,应用给body元素并且赋予center的值。

body{

text-align:center;

}
它公正地对待各种浏览器,十分彻底,唾手可得。然而,这是赋予文本的性质,它使#container中的文本也居中了。所以,在布局上我们还得做一些额外工作:

div#container{

text-align: left;

}

这样才可以把文本的对齐方式返回默认状状态。综合边界和文本排列,因为文本排列向后兼容,当代浏览器也支持自适应边界,很多设计师把他们结合起来,实现跨浏览器使用。

body{

text-align: center;
}

#container {

margin-left: auto;

margin-right: auto;

border: 1px solid red;

width: 168px;

text-align: left

}

唉,依然不完美,因为还是一个黑客技巧(hack)。你不得不为文本排列写下多余的规则。但现在,我们可以使用更完美的跨浏览器的方案。
负边界解决方案

转载文章请标明来自天晟网 timsion.com > 设计教程 > web设计 >
标题:WEB标准中元素水平居中方案总结
网址:http://www.timsion.com/webdesign/16702.html

关键词:WEB标准 水平居中 元素

上一篇:Web设计中的黄金分割
下一篇:web标准中CSS Frameworks的概念

免责声明:以上内容来自互联网和用户投稿,不代表本站的观点和立场,版权归原作者所有,如有侵权,请与我们联系。