新鲜、有趣,互联生活。令狐葱。

2007/10/05

CSS禅意花园阅读笔记二:居中显示

CSS禅意花园 Page86

1. 使用自动外边距实现居中

div #container {
    margin-left: auto;
    margin-right: auto;
    width: 168px;
}

注意,必须为容器指定宽度。

2. 使用text-align 实现居中

body {
    text-align: center;
}

这样所有body的子元素都被居中显示,然后需要附加条件:

p {
    text-align: left;
}

3. 组合使用自动外边距和文本对齐

body {
    text-align: center;
}
#container {
    margin-left: auto;
    margin-right: auto;
    border: 1px solid red;
    width: 168px;
    text-align: left;
}

4. 使用负外边距

#container {
    position: absolute;
    left: 50%;
    width: 760px;
    margin-left: -380px;
}

没有评论: