W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

CSS 对齐(Align)



在CSS中,有几个属性用于元素水平对齐。


中心对齐 - 使用margin属性

设置块元素的宽度将阻止它伸出到容器的边缘。使用 margin: auto;;可以水平地将元素置于容器内。

然后元素将占用指定的宽度,剩下的空间将平分在两个边距之间:

Example

.center {
    margin: auto;
    width: 60%;
    border: 3px solid #73AD21;
    padding: 10px;
}
尝试一下 »

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

提示: 关于文本对齐,请参阅 CSS Text(文本) 章节的内容。


左右对齐 - 使用position属性

元素对齐的方法之一是使用绝对定位position: absolute;

Example

.right {
    position: absolute;
    right: 0px;
    width: 300px;
    border: 3px solid #73AD21;
    padding: 10px;
}
尝试一下 »

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

提示: 当使用position对齐时,预先确定 <body> 元素的 marginpadding,始终是一个好主意。这是为了避免在不同的浏览器中的可视化差异。

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

Example

body {
    margin: 0;
    padding: 0;
}

.container {
    position: relative;
    width: 100%;
}

.right {
    position: absolute;
    right: 0px;
    width: 300px;
    background-color: #b0e0e6;
}
尝试一下 »

左右对齐 - 使用float属性

使用float属性是对齐元素的方法之一:

Example

.right {
    float: right;
    width: 300px;
    border: 3px solid #73AD21;
    padding: 10px;
}
尝试一下 »

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

Example

body {
    margin: 0;
    padding: 0;
}

.right {
    float: right;
    width: 300px;
    background-color: #b0e0e6;
}
尝试一下 »