div 中的元素居中

1、里面是inline

例如是文字:在div中加一个span就可以了  设置span样式为:height:32px line-height:32里面的文字就居中了

 height:30px;
 line-height:30px;
 width:100px;
 overflow:hidden;

 

2、里面是block 定位方法实现

 能用margin padding  就用  ;注意该方法 老是又溢出边界现象!

.guding{width:500px;height:200px;background:#c2300b;margin-left:50px;position:relative;}
.gd{width:50px;height:20px;background:#fff;position:absolute;top:50%;left:50%;margin-top:-10px;margin-left:-25px;}


代码要点
父容器要用相对定位position:relative;否则的话子元素会相对于浏览器窗口进行绝对定位。
子容器绝对定位,top:50%;left:50%;margin-top,margin-left的值取该容器高度,宽度的一半的负值。

例如:ul

使用:定位position法可以 :父元素:relative 子元素 relative  top:10%;

http://www.cnblogs.com/chenmuyue/archive/2013/05/02/3042984.html

posted on 2013-07-20 16:52  TrustNature  阅读(371)  评论(0编辑  收藏  举报