元素在div中水平居中

先看一下行级元素在div中水平居中;





div demo 








效果如下;span 是一个行级元素; 

元素在div中水平居中_第1张图片

如果把span换成a,如下;也是行级元素;

元素在div中水平居中_第2张图片 

首要的是外部的div要设置text-align:center;本例如果外部div去掉line-height属性后效果如下;

元素在div中水平居中_第3张图片

 然后看一下块级元素在div中水平居中;div是块级元素;





div demo 





内部元素

div在div中水平居中; 

元素在div中水平居中_第4张图片 

 外部的div不管,内部的div设置 margin:auto;

margin是外边距,设为auto就是自动计算此元素的外边距,相对于包围它的布局元素;

 

此例如果去掉内部div的line-height属性和height属性,margin写为margin:20px auto 20px auto,就是指定上和下外边距、自动计算左和右外边距,如下;

元素在div中水平居中_第5张图片

 内部如果换成

也可以,p也是块级元素;

你可能感兴趣的:(web前端,css,html5,前端,块级元素)