div居中以及div中的元素居中

  • Post author:
  • Post category:其他


div居中以及div中的元素居中

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同时垂直居中

div

{


width: 200px;

height: 200px;

line-height: 200px;

vertical-align: middle;

background-color: Gray;

}

div i

{


vertical-align: middle;

}

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

div

{


width: 200px;

height: 200px;

display: table-cell;

vertical-align: middle;

background-color: Gray;

}