先来看我一个简单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)。你不得不为文本排列写下多余的规则。但现在,我们可以使用更完美的跨浏览器的方案。
负边界解决方案
此方案得结合使用绝对定位(absolute?positioning?)。首先,把#container绝对定位并左偏移 50%,这样,#container的左边界就是页面分辨率的一半。下一步,把#container的左边界设置为负值,值大小为#container宽 度(width)的一半。
#container?{
background:?#ffc?url(mid.jpg)?repeat-y?center;
position:?absolute;
left:?50%;
width:?760px;
margin-left:?-380px;
}
看,没有任何黑客技巧(no?hacks)!连Netscape?4.x都支持!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
更新日志
- 群星.2013-摩登天空15年摇滚之路2CD摩登盘【摩登天空】【WAV+CUE】
- 马兰士10周年终极示范碟SACD-ISO
- CaraDillon-2009《HillOfThieves》[WAV+CUE]
- 刘德华1994-天意[谢谢您的爱系列复刻版][WAV]
- MC HotDog《脏艺术家》2023[WAV/分轨][690MB]
- 袁娅维《在与生俱来的不平衡里》2023[WAV/分轨][400MB]
- 《youtube油管MV点击量TOP200》[MP4][14.6G]
- 《冷漠2CD合集》[WAV+CUE][888M]
- 群星《流行经典靓歌101》5CD [FLAC][2.5G]
- S.E.N.S《故宫三部曲ファンハウス》[WAV+CUE][1G]
- 【新世纪】JohnAdorney-2024-BeforetheSettingSun(FLAC)
- 【新世纪】DianeArkenstone-2024-AquariaII-Ascension24bit(FLAC)
- 24K德国HD金碟《品味人声·HIFI怀旧篇》3CD[WAV]
- 群星《赤壁名伶DSD》[WAV分轨]
- 华纳群星.1990-华纳夏日4星道REMIX【华纳】【WAV+CUE】