Question

我想在点击它时在div的中间显示加载图像。但在Chrome中，图片显示在左上角。它只适用于动态内容。图像在Firefox中正确定位。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style>
    .inner_text {
        position: relative;
        top:45%;
    }
    .loading_img {
        position: relative;
        top:30%;
    }
    .plan_div {
        border: solid 1px;
        cursor: pointer;
        width:420px;
        height:243px;
    }
</style>
<div class='plan_div'>
    <img class="loading_img" src="http://cdn.jsdelivr.net/wp-advanced-ajax-page-loader/2.5.12/loaders/Atom%20Loading.gif" />
</div>
<div class='plan_div'>
    <div class='inner_text'>Click to generate graph.</div>
</div>
<script>
    function start_loading() {
        $(this).html('<img class="loading_img" src="http://cdn.jsdelivr.net/wp-advanced-ajax-page-loader/2.5.12/loaders/Atom%20Loading.gif">');
    }
    $(document).on('click', '.plan_div', start_loading);
</script>

Answer 1

如果职位是absolute

使用顶部，左侧，右侧和底部

当职位为relative

时

使用margin-top，margin-left，margin-right和margin-bottom

.inner_text { position: relative; margin-top:25%; }
.loading_img { position: relative; margin-top:20%;  }

DEMO（两种浏览器都很好）

Chrome忽略动态更改元素的相对定位

1 个答案: