博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
css 居中
阅读量:5037 次
发布时间:2019-06-12

本文共 902 字,大约阅读时间需要 3 分钟。

水平居中:

  1. 行内元素:父元素text-align:center;

  2. 确定宽度的块级元素:margin-left/right:auto;

  3. 不确定宽度的块级元素:

    a. 放在table的td里,table不是块级,但margin-left/right对它有效,table的宽度由它的内容决定。

      缺点:增加无语义标签,加深标签的嵌套次数。

    b. 将块级元素转化成inline,父元素taCenter

      缺点:不能设定长宽

    c. 父元素: float:left; position:relative; left:50%;

       子元素: position:relative; left:-50%;

     据说保留块元素block,不添加无语义标签,不增加嵌套深度

     但我不常用,在body下的主div中设置时,时常不好使,用text-align和margin一般就行了。position:relative会带来一定副作用。

竖直居中:

  1. 父元素不确定的文本、图片、块级元素的竖直居中

    给父容器设置相同的上下边距 padding-top/bottom

  2. 父元素高度确定的单行文本的竖直居中

    设置父元素line-height=父元素height

            (父子元素都加 vertical-align:middle)

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

    a. 又见table,td隐式设置vertical-align:middle,再给td一个height就可以了

    b. 对IE8和FF用vertical-align:middle (只对td/th有效)

                     加display:table-cell实现

       对IE6/7用特定格式的hack实现  * _ relative top bottom 类似水平居中3c

转载于:https://www.cnblogs.com/frostbelt/archive/2012/03/10/2388723.html

你可能感兴趣的文章
浅谈 @RequestParam 和@PathVariable
查看>>
NSEnumerator用法小结
查看>>
redhat 7 源码安装 mysql5.5.49
查看>>
技术项目,问题
查看>>
Android官方技术文档翻译——ApplicationId 与 PackageName
查看>>
Feign使用Hystrix无效原因及解决方法
查看>>
Sam做题记录
查看>>
hexo 搭建博客
查看>>
建造者模式(屌丝专用)
查看>>
Nginx + Tomcat 反向代理 如何在高效的在一台服务器部署多个站点
查看>>
C++的引用
查看>>
python itertools
查看>>
http://lorempixel.com/ 可以快速产生假图
查看>>
编写一个函数isMerge,判断一个字符串str是否可以由其他两个字符串part1和part2“组合”而成...
查看>>
文件操作
查看>>
NYOJ-613//HDU-1176-免费馅饼,数字三角形的兄弟~~
查看>>
graphite custom functions
查看>>
ssh无密码登陆屌丝指南
查看>>
一个自己写的判断2个相同对象的属性值差异的工具类
查看>>
[CF803C] Maximal GCD(gcd,贪心,构造)
查看>>