日期:2014-05-17  浏览次数:20529 次

html居中

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%;