CSS常用操作——————对齐

简介:

一、使用margin属性进行水平对齐   

1
2
3
4
5
6
7
8
9
10
*{
     margin: 0px;
}
.div{
     width: 70%;
     height: 1000px;
     background-color: red;
     margin-left: auto;
     margin-right: auto;
}

margin:值1 值2

值1代表上下 值2代表左右

1
2
3
4
5
6
7
8
9
*{
     margin: 0px;
}
.div{
     width: 70%;
     height: 1000px;
     background-color: red;
     margin: 100px auto;
}


二、使用position属性进行左右对齐

1
2
3
4
5
6
7
8
9
10
*{
     margin: 0px;
}
.div{
     width: 70%;
     height: 1000px;
     background-color: red;
     position: absolute;
     right: 0px;
}


三、使用float属性进行左右对齐

1
2
3
4
5
6
7
8
9
*{
     margin: 0px;
}
.div{
     width: 70%;
     height: 1000px;
     background-color: red;
     float: left;
}

本文转自yeleven 51CTO博客,原文链接:http://blog.51cto.com/11317783/1773177

相关文章
|
前端开发
【前端】CSS实现图片文字对齐 并随着设备尺寸改变而改变大小
【前端】CSS实现图片文字对齐 并随着设备尺寸改变而改变大小
165 0
【前端】CSS实现图片文字对齐 并随着设备尺寸改变而改变大小
|
前端开发
CSS:一行上不同大小的文字上下垂直居中对齐
CSS:一行上不同大小的文字上下垂直居中对齐
299 0
CSS:一行上不同大小的文字上下垂直居中对齐
|
前端开发
CSS高级技巧——鼠标样式,轮廓,文本域防拖拽,vertical-align 垂直对齐,文字溢出问题
CSS高级技巧——鼠标样式,轮廓,文本域防拖拽,vertical-align 垂直对齐,文字溢出问题
192 0
CSS高级技巧——鼠标样式,轮廓,文本域防拖拽,vertical-align 垂直对齐,文字溢出问题
|
数据采集 前端开发 数据挖掘
一篇文章带你了解CSS对齐方式
一篇文章带你了解CSS对齐方式
1123 0
|
前端开发
CSS如何让不相等的字符上下对齐
CSS如何让不相等的字符上下对齐
1028 0
|
前端开发 容器 SEO
从零开始学_JavaScript_系列(16)——CSS<3>(文本、对齐、圆角、盒模型、背景)
注意,有些CSS属性对于低版本浏览器(典型的就是IE),可能不支持,所以在面向低版本浏览器的时候需要注意的说。 关于CSS属性的兼容性检测的网站:http://caniuse.com/ 部分图片来自网易云课堂,侵、私信、删 (34)文字字体 ①font-size:文字大小 ②值有:length(具体值)、absolute-size(绝对值,用的少)、relative-size
1191 0