日期:2014-05-17 浏览次数:20563 次
1.水平居中
a.行内元素的水平居中;给父元素设定text-align:center;
b.定宽的块级元素的水平居中;给其设定margin:0px auto;
c.不定宽的块级元素的水平居中;
1.用table标签,设其为margin:0px auto;
2.变块级元素为行内元素,
3.设父元素为:float:left;position:relative;left:50%;
????? 子元素为:float:left;position:absolute;left:-50%;
?
2.竖直居中
a.父元素高度不确定的文本,图片,块级元素的竖直居中;给父容器设置相同的上下边距;
b.父元素高度确定的单行文本的竖直居中;给父元素设定line-height,其值与父元素的高度一样;
c.父元素高度确定的多行文本,图片,块级元素的竖直居中;
1.用表格布局
2.设置vertical-align:middle;display:table-cell;
?? 对不支持display:table-cell;的浏览器(ie6,ie7)设置:
???????????????????????? 父元素*position:relative;top:50%;
????????????????? ? ? ?? 子元素*position:absolute;top:-50%;