html如何设置自动对齐,HTML5 教程之CSS 水平对齐(Horizontal Align)

CSS 水平对齐(Horizontal Align)

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

块元素对齐

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

块元素的例子：

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

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

中心对齐,使用margin属性

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

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

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

实例

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

尝试一下 »

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

注意：IE5中块元素有一个margin处理BUG。为了使上述例子能工作，在IE5中，需要添加一些额外的代码，实例。

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

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

实例

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

尝试一下 »

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

Crossbrowser 兼容性问题

IE8和早期有一个问题，当使用position属性时。如果一个容器元素(在本例中

)指定的宽度，!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属性时。如果一个容器元素(在本例中

)指定的宽度，!DOCTYPE声明是缺失，IE8和早期版本会在右边增添17px的margin。这似乎是一个滚动的预留空间。使用float属性时始终设置在DOCTYPE声明中！

实例

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

html如何设置自动对齐,HTML5 教程之CSS 水平对齐(Horizontal Align)相关推荐

css设置水平坐对齐,CSS 水平对齐 (Horizontal Align)
CSS 水平对齐 (Horizontal Align) 关于 CSS 中元素的水平对齐 (Horizontal Align),你可以使用多种属性来进行设置. 在CSS中,有几个属性用于元素水平对齐. ...
html网页距离顶部50像素,HTML5 教程之CSS Padding（填充）
CSS Padding(填充) CSS Padding(填充)属性定义元素边框与元素内容之间的空间. Padding(填充) 当元素的 Padding(填充)(内边距)被清除时,所"释放&q ...
html下拉菜单原理,HTML5 教程之CSS 下拉菜单
CSS 下拉菜单使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果. 下拉菜单实例实例演示 1 文本下拉菜单实例演示 2 下拉菜单实例演示 3 基本下拉菜单当鼠标移动到指定元素上时,会出 ...
html5 tooltip,HTML5 教程之CSS 提示工具(Tooltip)
CSS 提示工具(Tooltip) 本文我们为大家介绍如何使用 HTML 与 CSS 来创建提示工具. 提示工具在鼠标移动到指定元素后触发,先看以下四个实例: 头部显示右边显示底部显示左边显示 ...
html语言面向对象,自学html5教程之JavaScript面向对象
原标题:自学html5教程之JavaScript面向对象 1.对象是什么面向对象编程(Object Oriented Programming,缩写为 OOP)是目前主流的编程范式. 它将真实世界各种 ...
html5的colgroup,HTML5 教程之HTML colgroup 标签
HTML 标签实例和标签为表格中的三个列设置了背景色: ISBN Title Price 3476896 My first HTML $53 尝试一下 » 浏览器支持所有主流浏览器都支持标签 ...
html5 th左对齐,HTML5 教程之HTML th 标签
HTML 标签实例一个简单的 HTML 表格,带有两个表头单元格和两个数据单元格: Month Savings January $100 尝试一下 » (更多实例见页面底部) 浏览器支持所有主流 ...
CSS 水平对齐 text-align-last属性
text-align-last属性用于定义块级容器中,行内元素的最后一行内容的水平对齐方式,可选值有 auto | left | center | right | justify | start | ...
html怎么给h2文字加颜色,css教程之css设置字体颜色
font-size:18px;:设置字号 color:#093:设置字色 font-family:'宋体';:设置字体 (要尽量使用通用的字体,就是用大家电脑上一般都有的字体,常用的是中文字体是宋体英 ...

html如何设置自动对齐,HTML5 教程之CSS 水平对齐(Horizontal Align)

html如何设置自动对齐,HTML5 教程之CSS 水平对齐(Horizontal Align)相关推荐

最新文章

热门文章