• absolute元素 text-align属性


    text-align属性的元素可以有效作用于inline/inline-block水平的子元素,但是,text-align属性对应用了position:absloute/fixed声明的元素无效!

     

    没有应用left/top等属性值的absolute元素就是个不占据空间的普通元素,如果是block水平的,换行显示;如果是inline水平的,跟在前面的文字后面显示。

     

    text-align属性作用的不是absolute元素,而是absolute元素之前的文字而已, 在FireFox浏览器,以及貌似IE6/IE7下,标签内似乎有不占据任何空间的匿名文字节点元素,于是,图片就跟在这个“隐形”的节点元素之后显示,而这个节点因为由于受text-align:center;声明影响居中显示了,于是,紧跟其后的inline水平的图片元素就对着中垂线显示了

     

    元素的水平居中,有个很经典的方法就是:
    .center { margin-left: -"1/2个元素宽度"; left: 50%; position: absolute; }
    但是,此方法需要父容器是body,或是是设置了position:relative属性的元素

     
     
  • 相关阅读:
    PHP基础介绍
    day96
    day95
    day94
    day93
    day93之微信推送
    22个必须知道的css技巧
    利用Js或Css滤镜实现IE6中PNG图片半透明效果 IE6PNG妥妥的
    dedecms调用日期格式化形式大全
    innerHTML动态添加html代码和脚本兼容性问题处理方法
  • 原文地址:https://www.cnblogs.com/chuangweili/p/5163149.html
Copyright © 2020-2023  润新知