网页设计水平竖直居中总结

不确定宽度块级元素水平居中

  • 包含在table中,使用margin-left:auto;margin-right:auto;
  • 改变块级元素类型为inline;使用text-align:center;
  • 给父元素设置float、relative、left:50%,子元素relative、left:-50%;

不确定父元素高度中文本、图片、块级元素竖直居中

给父容器设置相同的上下内边距。

父元素确定的单行文本竖直居中

给父元素设置line-height,line-height值和富裕苏高度值相同。

父元素高度确定的多行文本、图片、块级元素竖直居中

  • 表格
  • 父元素必须为td或th使用vertical-align:middle;dispaly:table-cell;但是IE6、IE7不支持,需要hack,使用*top:-50%;*position:50%;
除非注明, 风波竹林 文章均为原创,转载请以链接形式标明本文地址
本文地址: https://blog.fbzl.org/网页设计水平竖直居中总结/

发表评论