专栏首页csxiaoyao不定宽高div水平垂直居中(兼容ie6)

不定宽高div水平垂直居中(兼容ie6)

不定宽高div水平垂直居中(兼容ie6)

不定宽高div水平垂直居中解决方法有很多,JS是最能够确保各种浏览器中一致性的,但是仍然可以使用CSS的方式来解决。

1. 水平居中

margin:0 auto; 是最常用的让DIV容器居中的方法。margin作用于块级元素,而是否作用于其他内联元素因浏览器不同而不同,此处可能为内联元素,所以避免使用。 text-align:center; 可以让绝大多数的对象居中对齐,并且这个属性也获得了几乎全部浏览器的支持。实际上,这个属性定义的是块级对象内部文字的对齐方式,内部的文字或者图像一般是内联对象。

2. 垂直居中

  垂直居中,对于固定高度的容器使用负margin的方法有效,对于高度不固定的情形使用 vertical-align 属性,它定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。

3. 案例

css

#container_outer{
    display:table;
    overflow:hidden;
    _position:relative;
    width:600px;
    height:400px;
}   
#container_inner{
    vertical-align:middle;
    display:table-cell;
    text-align:center;
    _position:absolute;
    _top:50%;
    _left:50%;
    border:1px solid #000;
}   
#content{
    display:inline-block;
    _position:relative;
    _top:-50%;
    _left:-50%;
    border:1px solid #000;
}

html

<div id="container_outer">
    <div id="container_inner">
        <div id="content">
            动态内容...<br/>  
            动态内容...<br/>
            动态内容...
        </div>
    </div>
</div> 

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 解决img父元素高度多出3px

      结果运行之后发现,不管是在移动端还是pc端,都会出现这种问题。刚开始以为是父元素初始化了margin和padding的原因,排查css无果,又怀疑是html...

    csxiaoyao
  • 系统学习javaweb-07-学习速查案例01

    名称:通讯录系统 目的:常见的javaweb的一些写法总结 说明:数据使用xml,格式见data文件夹下文件,访问login.html,用户名:su...

    csxiaoyao
  • JavaScript性能提升学习

    不支持defer属性的浏览器:defer、script、load 支持defer属性的浏览器:script、defer、load 3.2 动态添加scr...

    csxiaoyao
  • 三星在智能城市K-City建立5G网络,用于自动驾驶基础设施

    三星正在与韩国运输安全局(KOTSA)合作,在最近开设的K-City测试设施中开发移动网络,用于自动驾驶汽车的基础设施。

    AiTechYun
  • 【PAT乙级】数字分类

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    喜欢ctrl的cxk
  • 前端算法题目解析

    前几天逛 github 的时候看到一些前端的算法题,自己做了一遍发现还挺有意思的,因此整理了一下收录 daily-question 的 algorithm 文件...

    小皮咖
  • Spring IOC 容器源码分析 - 填充属性到 bean 原始对象

    本篇文章,我们来一起了解一下 Spring 是如何将配置文件中的属性值填充到 bean 对象中的。我在前面几篇文章中介绍过 Spring 创建 bean 的流程...

    田小波
  • Spring 的 getBean 方法源码解析

    在文章 Spring 中 bean 注册的源码解析 和 Spring bean 创建过程源码解析 了解了 bean 的注册和创建过程,当通过 getBean 方...

    Java技术大杂烩
  • Swift体验2

    使用if和switch做条件判断,使用for-in,for,while,do-while做循环 操作。括号中的条件或循环变量是可选的。括号的身体是必需的。

    用户3004328
  • 彻底弄懂Spring中Bean的解析、创建和使用

    石奈子

扫码关注云+社区

领取腾讯云代金券