div对齐 CSS实现DIV居中对齐 div居右对齐 div居左对齐

使用CSS浮动属性实现 DIV各种对齐，比如DIV层左对齐，DIV居中对齐，DIV居右对齐等（DIV靠右居中靠左对齐介绍篇）

实现DIV对齐用到关键属性有两个，一个为 float一个为 margin。

第一个float,可以让你div层居左居右对齐，另外一个margin实现 div盒子居中对齐。

接下来DIVCSS5使用分别实例介绍 DIV布局对齐。

为了过程DIV对齐变化，DIVCSS5设置3个DIV盒子，分别 CSS 命名为“.divcss5-left”、“.divcss5-right”、“.divcss5-cent”，同时设置三者宽度、高度、边框相同属性。

三者相同样式 CSS代码：
width:250px; height:50px; border:1px solid #F00

一、div css布局之div左对齐 - TOP

1、div左对齐条件与方法
只需要对要靠左对齐（局左）的div样式加float:left即可。

2、 DIV+CSS布局完整代码：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>div对齐实例 在线演示 DIVCSS5</title> 
<style> 
.divcss5-left{float:left;width:250px;height:50px;border:1px solid #F00} 
</style> 
</head> 
<body> 
<div class="divcss5-left">此DIV靠左对齐显示</div> 
</body> 
</html>

3、实例截图：

div居左靠左对齐实例截图

二、居右靠右css+div实例 - TOP

1、div右对齐条件与方法
只需要对要靠右对齐（局右）的div样式加float:right即可。

2、 div css布局完整 html代码：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>div对齐实例 在线演示 DIVCSS5</title> 
<style> 
.divcss5-right{float:left;width:250px;height:50px;border:1px solid #F00} 
</style> 
</head> 
<body> 
<div class="divcss5-right">此DIV靠右对齐显示</div> 
</body> 
</html>

3、靠右对齐实例截图

css实现div居右对齐实例截图

二、div居中对齐css div实例 - TOP

1、div居中对齐条件与方法
只需要对要居中对齐的div样式加margin:0 auto，不再需要加float样式。

因为float没有居中的浮动，所以我们需要去掉float样式，为了兼容各大浏览器让div居中对齐，我们需要对div对应样式加margin:0 auto即可。

2、 css+div布局完整 HTML源代码：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>div对齐实例 在线演示 DIVCSS5</title> 
<style> 
.divcss5-cent{margin:0 auto;width:250px;height:50px;border:1px solid #F00} 
</style> 
</head> 
<body> 
<div class="divcss5-cent">此DIV居中右对齐显示</div> 
</body> 
</html>

3、 css布局实例截图

div盒子居中对齐演示效果截图

四、演示与下载 - TOP

1、在线演示：查看案例

2、三实例打包下载：

立即下载（0.978KB）

五、推荐相关CSS教程文章 - TOP

1、 div文字居中居左居右
2、 html内容居中
3、 css字体居中
4、 div布局居中
5、 div图片居中
6、 div水平居中
7、 div css在谷歌浏览器不居中
8、 div居中代码
9、 css清除浮动
10、 div align center转化css居中
11、 css垂直居中

如需转载，请注明文章出处和来源网址： http://www.divcss5.com/jiqiao/j633.shtml

必备CSS教程Essential CSS Tutorials

css height
css line-height
css width
css min-width
css max-width
css min-height
css max-height
css border
css background
css float
css clear
css display
css font
css text-transform
css英文首字母大写
css font-variant
css font-weight
css font-style
css text-decoration
css 删除线
div css 虚线
css 注释
html 注释
css padding
css margin
css 文本
css font-size
css font-family
css color
css text-align
css text-indent
css 超链接( css a)
css 优化压缩
css id( css #)
css class( css .)
css ul li列表
css 圆角圆边
css 父级子级
css 指针概念
css cursor
css overflow
html px em pt网页单位
CSS important
CSS position
css z-index
css white-space
css img图片
css class id
css link与@import区别
css 选择器
css引入html

必备HTML基础教程Essential HTML Tutorials

html img图片标签
html em标签( EM强调标签)
html strong加粗( strong标签)
html B加粗( b加粗标签)
strong与B加粗区别
h1 h2 h3 h4标签( html标题标签)
html A超链接锚文本
html注释
html head头部标签
html title标题标签
html meta标签
html link标签
html i斜体标签
html u下划线标签
html s删除线标签
html换行br标签
html p段落标签
p标签与br标签区别
html div标签元素
html span标签
html font标签
html script标签
html px em pt网页单位
html ul li列表
ol li列表
dl dt dd标签组
table tr td表格
table tr th表格
html form表单
html form input
html form textarea文本区域
html select下拉与跳转( Html select)
html iframe框架
html网页结构
htm html shtml区别用法
网页编码charset
UTF-8 GBK UTF8 GB2312区别联系
先写html还是先写CSS
显示扩展名
html标签大全集合
html常用标签
网页源代码是什么