使用CSS浮动属性实现DIV各种对齐，比如DIV层左对齐，DIV居中对齐，DIV居右对齐等（DIV靠右 居中 靠左对齐介绍篇）
实现DIV对齐用到关键属性有两个，一个为float一个为margin。
第一个float,可以让你div层居左居右对齐，另外一个margin实现div盒子居中对齐。
接下来HTML8使用分别实例介绍DIV布局对齐。
为了过程DIV对齐变化，HTML8设置3个DIV盒子，分别CSS 命名为“.HTML8-left”、“.HTML8-right”、“.HTML8-cent”，同时设置三者宽度、高度、边框相同属性。
三者相同样式CSS代码：
width:250px; height:50px; border:1px solid #F00
一、div css布局之div左对齐
1、div左对齐条件与方法
只需要对要靠左对齐（局左）的div样式加float:left即可。
2、DIV+CSS布局完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>div对齐实例 在线演示 HTML8</title>
<style>
.HTML8-left{float:left;width:250px;height:50px;border:1px solid #F00}
</style>
</head>
<body>
<div class="HTML8-left">此DIV靠左对齐显示</div>
</body>
</html>
3、实例截图：
div居左靠左对齐实例截图
二、居右靠右css+div实例
1、div右对齐条件与方法
只需要对要靠右对齐（局右）的div样式加float:right即可。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>div对齐实例 在线演示 HTML8</title>
<style>
.HTML8-right{float:left;width:250px;height:50px;border:1px solid #F00}
</style>
</head>
<body>
<div class="HTML8-right">此DIV靠右对齐显示</div>
</body>
</html>
3、靠右对齐实例截图
二、div居中对齐css div实例
1、div居中对齐条件与方法
只需要对要居中对齐的div样式加margin:0 auto，不再需要加float样式。
因为float没有居中的浮动，所以我们需要去掉float样式，为了兼容各大浏览器让div居中对齐，我们需要对div对应样式加margin:0 auto即可。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>div对齐实例 在线演示 HTML8</title>
<style>
.HTML8-cent{margin:0 auto;width:250px;height:50px;border:1px solid #F00}
</style>
</head>
<body>
<div class="HTML8-cent">此DIV居中右对齐显示</div>
</body>
</html>
3、css布局实例截图
div盒子居中对齐演示效果截图
四、演示与下载
1、在线演示：查看案例
2、三实例打包下载：
五、推荐相关CSS教程文章
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垂直居中