元素水平居中方案全集

先来看我一个简单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都支持！

赞 (0)

相关推荐

  • 元素水平居中方案全集

    先来看我一个简单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>

  • css如何让浮动元素水平居中

    对于定宽的非浮动元素我们可以在CSS中用 margin:0 auto 进行水平居中,对于不定宽的浮动元素我们也有一个常用的技巧解决它的水平居中问题.解决水平居中问题有很多种方法,下面先给大家分享一下三种方法,希望能帮助到大家. 方法一: 1.HTML 部分: <div class="box"> <p>我是浮动的</p> <p>我也是居中的</p> </div> 2.CSS 部分: .box{ float:left;

  • Android应用借助LinearLayout实现垂直水平居中布局

    首先说的是LinearLayout布局下的居中一般是这样的: (注意:android:layout_width="fill_parent" android:layout_height="fill_parent" 属性中,若水平居中,至少在宽度上占全屏:若垂直居中,则在高度上占全屏) <LinearLayout android:layout_width="fill_parent" android:layout_height="fil

  • 整理一些最近经常遇到的前端面试题

    前言 本文主要整理了一些最近遇到的前端面试题,方便大家在面试前有所准备,文中给出了详细的解答,下面话不多说了,来看看详细的介绍吧. 1.标签属性中title和alt的区别 答: title是设置鼠标移动到图片上时显示的内容,而alt是用于当图片没有正常显示时出现的提示文字,另外alt还用于在seo中针对图片的优化说明. 2.隐藏元素的几种方法 答: 1.display:none; 2.visibility:hidden; 3.opacity:0; 4.position:absolute; lef

  • 浏览器兼容性问题大汇总

    JavaScript 1.HTML对象获取问题 FireFox:document.getElementById("idName"); ie:document.idname或者document.getElementById("idName"). 解决办法:统一使用document.getElementById("idName"); 2.const问题 说明:Firefox下,可以使用const关键字或var关键字来定义常量; IE下,只能使用var

  • 几个常用经典的css技巧

    使用 line-height 垂直居中 line-height:24px; 使用固定宽度的容器并且需要一行垂直居中时,使用 line-height 即可(高度与父层容器一致),更多的垂直居中总结可以看这里. 清除容器浮动 #main { overflow:hidden; } 期前也提到过这样的问题,更多信息可以看这里. 不让链接折行 a { white-space:nowrap; } 上面的设定就能避免链接折行,不过个人建议长链接会有相应的这行(有关换行方面的讨论,参看圆心的记录). 始终让 F

  • 分享bootstrap学习笔记心得(组件及其属性)

    Bootstrap是一种web框架,是基于HTML,CSS和JS的一种目前较为流行的前端框架. Bootstrap包含有丰富的组件,根据提供的组件,开发者可以更加快速.便捷地搭建自己心仪的网站.通常包括有以下常用组件:下拉菜单.按钮组.按钮下拉菜单.导航.导航条.分页.排版.缩略图.警告对话框.进度条.媒体对象等.此外,bootstrap还包含有众多jQuery插件:莫泰局昂.标签页.滚动条.弹出框等. 有关bootstrap的下载和文档可到bootstrap中文网:www.bootcss.co

  • JS 实现导航栏悬停效果(续2)

    [JS-实现导航栏悬停] [JS-实现导航栏悬停(续)] 用Jquery重新写完这个页面之后,发现原来的方法还有是有几个问题: 1.首先Js代码冗余,导航条上的Tab是用js实现跳转而不是超链接: 2.还有导航条本身用fixed定位,但没有被设置为水平居中,而是在JS中更改left值使其居中. 问题2就导致了,当浏览器窗口尺寸发生变化的时候,浏览器中的div的位置都发生了变化,也就导致了没法通过页面中的div动态的给已fixed定位的导航条来定位. 最终的代码更改如下: test.html 复制

  • 顶级经典常用的CSS属性收集整理

    文本两端对齐: 复制代码 代码如下: text-align:justify; text-justify:inter-ideograph; 清除浮动: 复制代码 代码如下: .clear{clear:both;line-height:0;height:0;font-size:0;} 清除浮动伪类: 复制代码 代码如下: .clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;

  • JavaScript实现单英文金山打字通

    JavaScript实现单英文金山打字通

    单英文的金山打字通的具体实现代码,供大家参考,具体内容如下 1.页面的布局代码如下: <div> <div id="char">A</div> <div id="result">请在按键上按下屏幕上显示的字</div> </div> 2.页面布局的样式代码如下: body{ margin: 0; /*开启弹性布局,并让弹性布局中的子元素 水平居中对齐,垂直居中对齐*/ display: flex

随机推荐