CSS 水平对齐(Horizontal Align)

共计 1218 个字符，预计需要花费 4 分钟才能阅读完成。

块元素对齐

块元素是一个元素，占用了全宽，前后都是换行符。

块元素的例子：

• <h1>
• <p>
• <div>

文本对齐，请参阅  CSS 文本  章节。.

在这一章中，我们会告诉你块元素如何 水平对齐 布局。

中心对齐, 使用 margin 属性

块元素可以把左，右页边距设置为 "自动" 对齐。

Note: 在 IE8 中使用 margin:auto 属性无法正常工作，除非声明  !DOCTYPE

margin 属性可任意拆分为左，右页边距设置自动指定，结果都是出现居中元素：

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

在线运行

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

使用 position 属性设置左，右对齐

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

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

在线运行

注意：绝对定位与文档流无关，所以它们可以覆盖页面上的其它元素。

Crossbrowser 兼容性问题

元素的填充，始终是一个好主意。这是为了避免在不同的浏览器中的可视化差异。

IE8 和早期有一个问题，当使用 position 属性时。如果一个容器元素（在本例中 <div class="container">）指定的宽度，!DOCTYPE 声明是缺失，IE8 和早期版本会在右边增添 17px 的 margin。这似乎是一个滚动的预留空间。使用 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;
}

在线运行

Crossbrowser 兼容性问题

类似这样的元素对齐时，预先确定 margin 和元素的填充，始终是一个好主意。这是为了避免在不同的浏览器中的可视化差异。

IE8 和早期有一个问题，当使用 float 属性时。如果一个容器元素（在本例中 <div class="container">）指定的宽度，!DOCTYPE 声明是缺失，IE8 和早期版本会在右边增添 17px 的 margin。这似乎是一个滚动的预留空间。使用 float 属性时始终设置在 DOCTYPE 声明中！

body
{
    margin:0;
    padding:0;
}
.right
{
    float:right;
    width:300px;
    background-color:#b0e0e6;
}

在线运行