css一些特别效果设定

在CSS中,BOX的Padding属性的数值赋予顺序为

padding:10px;                           四个内边距都是10px
padding:5px 10px;   上下5px 左右10px
padding:5px 10px 15px; 上5px 右10px 下15px 左因为缺省与右相等,则为10px
padding:5px 10px 15px 20px; 上5px 右10px 下15px  左20px

div水平和垂直居中,text-align和vertical-align不起作用,因为标签div没有这两个属性,所以再css中设置这两个值不能居中的效果。

1. div水平居中:设置margin的左右边距为自动。

1 div
2 {
3 margin:0 auto;
4 }

2.   div中的元素居中

2.1 div中的文字居中:将div的行高设置跟其高度一样的值。

1 div
2 {
3 height:200px;
4 line-height:200px;
5 }

2.2 div中的图片居中,方法一:将div的行高设置跟其高度一样的值,将其中的图片img外套上标签i,设置i和div同时垂直居中

css一些特别效果设定
 1 div
2 {
3 width: 200px;
4 height: 200px;
5 line-height: 200px;
6 vertical-align: middle;
7 background-color: Gray;
8 }
9 div i
10 {
11 vertical-align: middle;
12 }
css一些特别效果设定

2.3 div中的图片居中,方法二:将div转换成tablecell,让后设置vertical-align属性居中。

css一些特别效果设定
1 div
2 {
3 width: 200px;
4 height: 200px;
5 display: table-cell;
6 vertical-align: middle;
7 background-color: Gray;
8 }
css一些特别效果设定
 
 
上一篇:DataTable行分组,并sum求和


下一篇:linux系统下安装jdk、tomcat、mysql、redis