css技巧之——居中问题

来源:互联网 发布:淘宝买东西怎么开票 编辑:程序博客网 时间:2024/05/07 02:59

1.自适应水平居中,条件:width:(宽度已经确定)

                                   margin:0 auto。 

2.在一个已知宽高的div中居中小div

   思路:绝对定位+在通过负margin调整     #inner{position: absolute;

                                                                                         left:50%;top:50%;

                                                                                         margin:-居中d iv的长度的一般 0 0 - 居中div宽度的一半}

3.单行文字居中

  思路:行高。谁要居中,谁就设置行高 = 高度

4.多行文本居中

  思路:分浏览器考虑

  第一:普通浏览器,父级元素设置,display:table-cell(让元素可以已单元格的形式显示),vertical-align:设置垂直居中(注意:vertical只对内联元素及单元格元素起作用, td,<th><caption>,对div不起作用)

 第二:ie6不支持table-cell 属性。http://www.w3cfuns.com/article-5597406-1-1.html


5.练习,淘宝2007年ued招聘

使用纯CSS实现 未知尺寸的图片(宽高均小于200px)在200px的正方形容器中水平和垂直居中。

淘宝UED根据经验提出了一种方式:

 

  1. *display:block;
  2. *font-size:175px;

0 0
原创粉丝点击