最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
典型的三行二列居中高度自适应布局
时间：2022-07-02 13:12:06 编辑：袖梨 来源：一聚教程网
如何使整个页面内容居中，如何使高度适应内容自动伸缩。这是学习CSS布局最常见的问题。下面就给出一个实际的例子，并详细解释。（本文的经验和是蓝色理想论坛xpoint、guoshuang共同讨论得出的。）
首先先按这里看实际运行效果，这个页面在mozilla、opera和IE浏览器中均可以实现居中和高度自适应。我们来分析代码：
完整代码
| 代码如下 | 复制代码 |
header class="text">right 1 1 1 1 1 left |
|
代码分析
首先我们定义body和顶部第一行#header，这里面的关键是body中的text-align:center;和header中的margin-right: auto;margin-left: auto;，通过这两句使得header居中。注：其实定义text-align:center;就已经在IE中实现居中，但在mozilla中无效，需要设置margin:auto;才可以实现mozilla中的居中。