当前位置: 代码迷 >> HTML/CSS >> html正中
  详细解决方案

html正中

热度:415   发布时间:2012-11-23 22:54:33.0
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%;

  相关解决方案