CSS中让页面居中的技巧

转载 2007年09月13日 14:03:00

源地址:

http://www.bikeroll.com/article.aspx?id=24

 

假设下面的布局:

<body>

       <div id="wrapper"></div>

</body>

有两种方法可以实现我们想要的效果

1.使用自动空白边让设计居中:

#wrapper { width:720px;margin:0 auto;}

但是IE不支持自动空白边,幸运的是IE将text-align:center误解为让所有东西居中,所以可以利用这点来达到我们的要求

body{ text-align:center;}

#wrapper { width:720px;margin:o auto;text-align:left;}

2. 使用定位和负值空白边让设计居中:

#wrapper{width:720px;position:relative;left:50%;margin-left:-360px;}

该样式首先定义容器的宽度,然后将容器的左边缘定位在页面的中间,最后在左边应用一个负值的空白边,宽度等于容器的一半,这样就把容器往左移动它的宽度的一半,从而达到居中的目的。 

转载说明:

第二种做法针对<table>是不太合适的。它会让多个<table>重叠在一起。

 

 

相关文章推荐

CSS布局奇葩技巧之--各种居中

居中是我们使用css来布局时常遇到的情况。使用css来进行居中时,有时一个属性就能搞定,有时则需要一定的技巧才能兼容到所有浏览器,本文就居中的一些常用方法做个简单的介绍。 注:本文所讲方法除了特...

CSS让图片垂直居中的几种技巧

在网页设计过程中,有时候会希望图片垂直居中的情况。而且,需要垂直居中的图片的高度也不确定,这就会给页面的布局带来一定的挑战。下面总结了一下,曾经使用过的几种方法来使图片垂直居中,除了第一种方法只限于标...
  • yzbben
  • yzbben
  • 2016年07月14日 01:38
  • 196

CSS布局技巧之--各种居中

居中是我们使用css来布局时常遇到的情况。使用css来进行居中时,有时一个属性就能搞定,有时则需要一定的技巧才能兼容到所有浏览器,本文就居中的一些常用方法做个简单的介绍。 注:本文所讲方法除了特...

CSS实战技巧:图片(大小不固定)的水平垂直居中

1.display:inline-block和文字大小控制居中如果图片和文本处于一行时,可采用这种方法。 html代码 关注我们: css代码.box { ...

CSS实现固定宽度且居中的页面排版

先看一下效果图:

CSS学习笔记----页面居中实现

页面居中 *{ padding:0px; margin:0px; font-size:12px; } /*IE浏览器设置此选项就会使页面居中 body{ text-a...

CSS3与页面布局学习总结(三)——BFC、定位、浮动、7种垂直居中方法

一、BFC与IFC 1.1、BFC与IFC概要 BFC(Block Formatting Context)即“块级格式化上下文”, IFC(Inline Formatting Context)即行...

CSS布局奇淫技巧之--各种居中

居中是我们使用css来布局时常遇到的情况。使用css来进行居中时,有时一个属性就能搞定,有时则需要一定的技巧才能兼容到所有浏览器,本文就居中的一些常用方法做个简单的介绍。 注:本文所讲方法除了特别说...

使用css的绝对定位来控制页面居中的方法之一

直接上代码。。。 1.绝对居中(水平和垂直方向都居中) #main{ /*css只有这种注释方法,不能用双斜线注释,否则会发生你意想不到的问题*/ position:absolut...

页面重构css技巧总结篇(8.1-8.5)

1.如何让文字在容器内垂直居中? (1)方法:为容器添加line-height属性,使得line-height的值等于容器的height。 (2)代码 无标题文档 .container{ ...
  • fareise
  • fareise
  • 2016年08月07日 17:02
  • 1639
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS中让页面居中的技巧
举报原因:
原因补充:

(最多只允许输入30个字)