- 第1节:CSS 简介
- 第2节:CSS 语法
- 第3节:CSS Id 和 Class选择器
- 第4节:CSS 创建
- 第5节:CSS Backgrounds (背景)
- 第6节:CSS Text(文本)
- 第7节:CSS Fonts (字体)
- 第8节:CSS 链接样式
- 第9节:CSS 列表样式 (ul)
- 第10节:CSS Table (表格)
- 第11节:CSS Box Model (盒子模型)
- 第12节:CSS Border (边框)
- 第13节:CSS 轮廓(outline)属性
- 第14节:CSS Margin(外边距)
- 第15节:CSS Padding(填充)
- 第16节:CSS 分组和嵌套
- 第17节:CSS 尺寸 (Dimension)
- 第18节:CSS Display (显示) 与 Visibility(可见性)
- 第19节:CSS Positioning (定位)
- 第20节:CSS Float(浮动)
- 第21节:CSS 水平对齐 (Horizontal Align)
- 第22节:CSS 组合选择符
- 第23节:CSS 伪类
- 第24节:CSS 伪元素
- 第25节:CSS 导航栏
- 第26节:CSS 下拉菜单
- 第27节:CSS 图像透明/不透明
- 第28节:CSS 图像拼合技术
- 第29节:CSS 媒体类型
- 第30节:CSS 属性选择器
CSS 水平对齐 (Horizontal Align)
CSS 水平对齐 (Horizontal Align)
关于 CSS 中元素的水平对齐 (Horizontal Align),你可以使用多种属性来进行设置。
块元素对齐
块元素是一个元素,占用了全宽,前后都是换行符。
块元素的例子:
- <h1>
- <p>
- <div>
文本对齐,请参阅 CSS文本 章节。.
在这一章中,我们会告诉你块元素如何水平对齐布局。
中心对齐,使用margin属性
块元素可以把左,右页边距设置为"自动"对齐。
Note: 在IE8中使用margin:auto属性无法正常工作,除非声明 !DOCTYPE
margin属性可任意拆分为左,右页边距设置自动指定,结果都是出现居中元素:
实例
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}
提示: 如果宽度是 100%,对齐是没有效果的。
注意:IE5 中块元素有一个 margin 处理 BUG。为了使上述例子能工作,在 IE5 中,需要添加一些额外的代码。
实例
<style>
.container
{
text-align:center;
}
.center
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
text-align:left;
}
</style>
点击“尝试一下”按钮查看
使用 position 属性设置左,右对齐
元素对齐的方法之一是使用绝对定位:
实例
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}
注意:绝对定位与文档流无关,所以它们可以覆盖页面上的其它元素。
使用 float 属性设置左,右对齐
使用 float 属性是对齐元素的方法之一:
实例
{
float:right;
width:300px;
background-color:#b0e0e6;
}
使用 Padding 设置垂直居中对齐
CSS 中一个简单的设置垂直居中对齐的方式就是头部顶部使用 padding:
.center { padding: 70px 0; border: 3px solid green; }
如果要水平和垂直都居中,可以使用 padding 和 text-align: center:
.center { padding: 70px 0; border: 3px solid green; text-align: center; }
Crossbrowser 兼容性问题
类似这样的元素对齐时,预先确定 margin 和元素的填充,始终是一个好主意。这是为了避免在不同的浏览器中的可视化差异。
IE8 和早期有一个问题,当使用 float 属性时。如果一个容器元素(在本例中<div>)指定的宽度,!DOCTYPE 声明缺失,IE8 和早期版本会在右边增添 17px 的 margin。这似乎是一个滚动的预留空间。使用 float 属性始终设置在 DOCTYPE 声明中!
实例
{
margin:0;
padding:0;
}
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}