css元素对齐属性 – CSS高级教程

上一章CSS高级教程请查看：css浮动属性float

CSS有几个属性可以用来对齐web页面上的元素。

文本对齐方式

block-level元素中的文本可以通过正确设置text-align来进行对齐。

h1 {
    text-align: center;
}
p {
    text-align: left;
}

有关文本格式的更多信息，请参见本CSS教程。

使用margin属性进行居中对齐

块级元素的居中对齐是CSS margin属性最重要的含义之一，例如，<div>容器可以通过将左右边距设置为auto来水平居中对齐。

div {
    width: 50%;
    margin: 0 auto;
}

上面示例中的样式规则将<div>元素水平对齐。

注意：除非指定<！DOCTYPE>，否则margin属性的值auto在Internet Explorer 8和更早版本中将不起作用。

使用position属性对齐元素

CSS位置与left，right，top和bottom属性结合使用，可以使元素相对于文档的视口对齐或包含父元素。

.up {
    position: absolute;
    top: 0;
}
.down {
    position: absolute;
    bottom: 0;
}

要了解更多关于定位元素的信息，请参阅CSS定位教程。

使用浮动属性对左右对齐

float CSS属性可用于将元素对齐到其包含块的左侧或右侧，从而使其他内容可以沿着其一侧流动。

因此，如果元素向左浮动，则内容将沿其右侧流动。相反，如果元素向右浮动，则内容将沿其左侧流动。

div {
    width: 200px;
    float: left;
}

清除浮动

使用基于浮动的布局最令人困惑的事情之一是父布局的折叠，父元素不会自动展开以容纳被浮动的元素。不过，如果父类不包含任何视觉上明显的背景或边框，这并不总是显而易见的，但必须注意这一点，并必须加以处理，以防止出现奇怪的布局和跨浏览器问题。见下图:

可以看到，<div>元素没有自动展开以适应浮动的图像。这个问题可以通过清除容器中被浮动元素之后、容器元素的结束标记之前的浮动来解决。

修复父元素折叠

有几种方法可以修复CSS折叠父元素的问题。下面将介绍这些解决方案和实际示例。

解决方案1：浮动容器

修复此问题的最简单方法是浮动包含的父元素。

.container {
    float: left;
    background: #f2f2f2;
}

警告：此修复程序仅在有限的情况下有效，因为浮动父元素可能会产生意外的结果。

解决方案2：使用空Div

这是一种老式的方法，但却是一种简单的解决方案，适用于所有浏览器。

.clearfix {
    clear: both;
}
/* html代码片段 */
<div class="clearfix"> </div>

你也可以通过<br>标记来实现这一点，但是不推荐使用此方法，因为它将非语义代码添加到标记中。

解决方案3：使用:after伪元素

与content属性一起使用的:after伪元素已被广泛用于解决浮动清除问题。

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix类适用于任何具有浮动子代的容器。

警告：Internet Explorer up IE7不支持：after伪元素，但是支持IE8，但需要声明<！DOCTYPE>。