zoukankan      html  css  js  c++  java
  • 如何让DIV居中

    总结:text-align:center;对三中浏览器而言,都具有文字/行内元素的嵌套式居中,或者说继承式的居中,只要外面的容器设置了这个属性,那么他内部的所有元素都具有这个属性(意思是,虽然这个属性在谷歌和火狐中并不能对内部DIV有水平居中特效,但是由于它对文字的嵌套居中特效,使得设置这个属性的DIV的内部所有的文字/行内元素,无论嵌套多深,都有水平居中效果)。但对于IE来讲比较特殊,它还对块元素嵌套式的水平居中。

        margin:0 auto;对3种浏览器而言,都具有一样的特性,就是设置在哪个DIV身上,哪个DIV就在其父容器中水平居中,但是不是嵌套式的,如果还继续想达到里面的每一个DIV元素居中,那么要给每一个DIV,都加上这个属性。需要注意一点,这个属性对3种浏览器而言,对行内元素,和没有被任何包围的文字节点,是没有任何居中效果的

    IE:外部div包含的所有东西都嵌套式的居中----->div内的行内元素和块元素都水平居中,一层层的往里均居中。

    火狐、谷歌:内部div水平和垂直都不居中,行内元素嵌套式居中------>div内的行内元素水平居中,内部的块元素不居中

    <div id="divOut" style="border:solid;500px;height:400px;text-align:center;">
            <div style="border: solid;  300px; height: 200px;"></div>
    </div>

    IE、火狐、谷歌:内部内容都水平居中,垂直不居中(下面有两种情况,文字有没有被SPAN包围结论都一样)

    <div style="border:solid;500px;height:400px;text-align:center;">
            <span style="border: solid;  300px; height: 200px;">DIV里面的span,span里面的文字</span>
    </div>
    
    <div style="border:solid;500px;height:400px;text-align:center;">
            DIV里面的文字内容
    </div>
  • 相关阅读:
    转载:混淆包含SlidingMenu、gson等Android代码的proguard写法
    今天解决的两个问题
    C++中指针和引用的区别
    负载均衡服务器session共享的解决方案 (转载)
    Entity Framework的默认值BUG解决方法
    【转】SAPI中的IspeechRecoContext(接口)
    Sapi 添加语法的文章(转载)
    SAPI训练文件存储位置
    Flask第九篇 Flask 中的蓝图(BluePrint)
    Flask 第八篇 实例化Flask的参数 及 对app的配置
  • 原文地址:https://www.cnblogs.com/mrxiaohe/p/5226458.html
Copyright © 2011-2022 走看看