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>
  • 相关阅读:
    python第九十天----jquery
    收藏所用C#技术类面试、笔试题汇总
    线程内打开窗体
    有关正则表达式的一些总结
    XML与Object的范型转换
    开始工作了
    Oracle查询数据表结构(字段,类型,大小,备注)
    MyEclipse安装jbpm插件
    MyEclipse启动tomcat增加内存配置
    extJs常用的四种Ajax异步提交
  • 原文地址:https://www.cnblogs.com/mrxiaohe/p/5226458.html
Copyright © 2011-2022 走看看