zoukankan      html  css  js  c++  java
  • css3 实现元素水平和垂直居中

    最近在用html5 写一些 移动前端页面

    一开始对html5宣称的很多特性非常兴奋 。

    结果真正用起来得时候,却非常失望,因为很多新属性必须要加浏览器前缀

     

    一致期盼html5能带来尽可能的浏览器兼容

     

    看来情况却更加恶化了。怪不得facebook 要放弃html5 的方式而使用app做客户端

     

    因为使用了最新的盒子模型:-webkit-box

     

    而要实现起来 其内部元素居中则需要在父层元素这么写:


    <del>/* Firefox */
        display:-moz-box;
        -moz-box-pack:center;/*实现水平居中*/
        -moz-box-align:center;/*垂直居中,不需要删除即可*/
    
    
        /* Safari、Opera 以及 Chrome */
        display:-webkit-box;
        -webkit-box-pack:center;<span style="font-family: Arial, Helvetica, sans-serif;">/*实现水平居中*/</span>
        -webkit-box-align:center;<span style="font-family: Arial, Helvetica, sans-serif;">/*垂直居中,不需要删除即可*/</span>
    
    
        /* W3C */
        display:box;
        box-pack:center;<span style="font-family: Arial, Helvetica, sans-serif;">/*实现水平居中*/</span>
        box-align:center;<span style="font-family: Arial, Helvetica, sans-serif;">/*垂直居中,不需要删除即可*/</span></del>


    这就是 html5 为我们带来的 “方便”?

    还是我还没有入门?

     

    好吧,是我没搞明白,因为使用过display:box 属性后, 该容器则定义为了内联元素,使用margin:0px auto让其居中是无效的,要想使其居中只能通过它的父容器的text-align:center即可

  • 相关阅读:
    软件测试(理论基础)
    Android NDK常见配置问题的解决方案
    Eclemma各种安装方式以及安装失败解决
    检测Buffer Overflow的几种方法
    转: 跟我一起写 Makefile
    流敏感、路径敏感、上下文敏感
    Symbolic Exectuion with Mixed ConcreteSymbolic Solving
    基于ajc的代码编织
    第一次个人编程作业
    第一次博客作业
  • 原文地址:https://www.cnblogs.com/salading/p/4385032.html
Copyright © 2011-2022 走看看