IE 和 Chrome 中的定位和居中表现不一致问题 -问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

IE 和 Chrome 中的定位和居中表现不一致问题

杨冬芳 2016-06-22 18:07:59 2406

器版本是IE 11和Chrome 50
html 代码

    <div class="outer">
        <div class="inner"></div>
    </div>

CSS代码

    .outer {
        position: relative;
        width: 400px;
        height: 200px;
        background: #f44336;
        
        /* 在子元素有绝对定位的情况下,在IE中居中无效, Chrome中偏向中间,但是并不完全居中。 IE 11则完全向左*/
        text-align: center;
    }
    .inner {
        /* 去掉绝对定位,在IE 11 和Chrome中,inner居中正常*/
        position: absolute;
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: #eee;
    }

代码链接

复制链接,分别在IE 和Chrome 中粘贴打开,你会发现表现不一样,

•在.inner元素, 有绝对定位而且display设定为inline-block时,在IE中.outer的text-align: center无效,Chrome中也不会正常居中而是会偏一点,不知道为什么 ???

•去掉绝对定位就一切正常了

Web App开发 前端开发
分享到
取消 提交回答
全部回答(1)
  • 杨冬芳
    2019-07-17 19:45:51

    screenshot
    内联元素在有position情况下,text-align:right;会使元素与父元素右边对齐;
    text-align:left;使元素与其左边对齐,text-align:center;与中间线对齐,所以并不会完全水平居中,至于ie不一样,那是ie犯浑的表现

    0 0
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

推荐文章
相似问题