CSS 水平对齐

w3school 在线教程

## CSS 基础教程

- CSS 教程
- CSS 简介
- CSS 基础语法
- CSS 高级语法
- CSS 派生选择器
- CSS id 选择器
- CSS 类选择器
- CSS 属性选择器
- CSS 创建

## CSS 样式

- CSS 背景
- CSS 文本
- CSS 字体
- CSS 链接
- CSS 列表
- CSS 表格
- CSS 轮廓

## CSS 框模型

- CSS 框模型概述
- CSS 内边距
- CSS 边框
- CSS 外边距
- CSS 外边距合并

## CSS 定位

- CSS 定位概述
- CSS 相对定位
- CSS 绝对定位
- CSS 浮动

## CSS 选择器

- CSS 元素选择器
- CSS 选择器分组
- CSS 类选择器详解
- CSS ID 选择器详解
- CSS 属性选择器详解
- CSS 后代选择器
- CSS 子元素选择器
- CSS 相邻兄弟选择器
- CSS 伪类
- CSS 伪元素

## CSS 高级

- CSS 对齐
- CSS 尺寸
- CSS 分类
- CSS 导航栏
- CSS 图片库
- CSS 图片透明
- CSS 媒介类型
- CSS 注意事项
- CSS 总结

## CSS 实例

- CSS 实例

## CSS 测验

- CSS 测验

## CSS 参考手册

- CSS 参考手册
- CSS 选择器
- CSS 听觉参考手册
- CSS 网络安全字体
- CSS 单位
- CSS 颜色
- CSS 颜色值
- CSS 颜色名
- CSS 颜色十六进制

## 建站手册

- 网站构建
- 万维网联盟 (W3C)
- 浏览器信息
- 网站品质
- 语义网
- 职业规划
- 网站主机

## 关于 W3School

## 帮助 W3School

## 广告刊例

# CSS 水平对齐

- CSS 伪元素
- CSS 尺寸

在 CSS 中，可以使用多种属性来水平对齐元素。

## 对齐块元素

块元素指的是占据全部可用宽度的元素，并且在其前后都会换行。

块元素的例子：

    <h1>
    <p>
    <div>

对于文本对齐，请参见 CSS 文本一章。

在本教程中，我们将向您展示出于布局目的如何水平对齐块级元素。

## 使用 margin 属性来水平对齐

可通过将左和右外边距设置为 "auto"，来对齐块元素。

注释：除非已经声明了 !DOCTYPE，否则使用 margin:auto 在 IE8 以及更早的版本中是无效的。

把左和右外边距设置为 auto，规定的是均等地分配可用的外边距。结果就是居中的元素：

### 实例

    .center
    {
    margin-left:auto;
    margin-right:auto;
    width:70%;
    background-color:#b0e0e6;
    }

亲自试一试

提示：如果宽度是 100%，则对齐没有效果。

注释：在 IE5 中，对于块元素存在一个外边距处理方面的 BUG。如需使上面的例子在 IE5 中有效，请添加一些额外的代码。亲自试一试。

## 使用 position 属性进行左和右对齐

对齐元素的方法之一是使用绝对定位：

### 实例

    .right
    {
    position:absolute;
    right:0px;
    width:300px;
    background-color:#b0e0e6;
    }

亲自试一试

注释：绝对定位元素会被从正常流中删除，并且能够交叠元素。

## 跨浏览器兼容性问题

当像这样对齐元素时，对 <body> 元素的外边距和内边距进行预定义是一个好主意。这样可以避免在不同的浏览器中出现可见的差异。

当使用 position 属性时，IE8 以及更早的版本存在一个问题。如果容器元素（在我们的案例中是 <div class="container">）设置了指定的宽度，并且省略了 !DOCTYPE 声明，那么 IE8 以及更早的版本会在右侧增加 17px 的外边距。这似乎是为滚动条预留的空间。当使用 position 属性时，请始终设置 !DOCTYPE 声明：

### 实例

    body
    {
    margin:0;
    padding:0;
    }
    .container
    {
    position:relative;
    width:100%;
    }
    .right
    {
    position:absolute;
    right:0px;
    width:300px;
    background-color:#b0e0e6;
    }

亲自试一试

## 使用 float 属性来进行左和右对齐

对齐元素的另一种方法是使用 float 属性：

### 实例

    .right
    {
    float:right;
    width:300px;
    background-color:#b0e0e6;
    }

亲自试一试

## 跨浏览器兼容性问题

当像这样对齐元素时，对 <body> 元素的外边距和内边距进行预定义是一个好主意。这样可以避免在不同的浏览器中出现可见的差异。

当使用 float 属性时，IE8 以及更早的版本存在一个问题。如果省略 !DOCTYPE 声明，那么 IE8 以及更早的版本会在右侧增加 17px 的外边距。这似乎是为滚动条预留的空间。当使用 float 属性时，请始终设置 !DOCTYPE 声明：

### 实例

    body
    {
    margin:0;
    padding:0;
    }

    .right
    {
    float:right;
    width:300px;
    background-color:#b0e0e6;
    }

亲自试一试

- CSS 伪元素
- CSS 尺寸