Javascript css文本对齐中心不适用于IE11

我有一个画布和一个重叠的图像。在chrome和firefox上，“中心对齐”属性工作得非常好，但在IE上不起作用。画布不居中，但图像居中。我尝试了其他方法来居中画布和图像，但没有任何效果

我用它来显示交互式RRD图。它使用这个框架。 画布是由这个库创建的，这是一个可能的原因吗？ （仅供参考：画布在rrdGraphPng.js文件中创建，方法为：_addCanvas（））

我的目标是重叠画布和图像，并将它们水平居中

这是我的html（在javascript添加画布之后）：

这是在浏览器中生成的内容：

div {
   display: block;
}

#ctrl {
   height: 100%;
   width: 100%;
   text-align: center;
}

/* Canvas */
element.style {
   position: absolute;
   cursor: url(http://../rrdtoolgraph/RrdGraphJS/public//MoveCursor.cur), move;
   width: 700px;
   height: 330px;
}

/* this is not present in Firefox and IE11 */
canvas[Attributes Style] {
   -webkit-user-drag: none;
}

/* Image */
element.style {
   height: 330px;
   width: 700px;
   display: inline-block;
}

#img {
   width: 700px;
   height: 330px;
   padding: 0;
   margin: auto;
}

/* this is not present in Firefox and IE11 */
img[Attributes Style] {
   -webkit-user-drag: none;
}

---

这是一本书。它不能正常运行，因为它需要访问无法通过JSFIDLE管理的资源。

经过大量的实验，我终于找到了一个可以在所有浏览器上运行的解决方案。这不是最好的解决方案，但目前是唯一的解决方案：

    .title {
        text-align: center;
    }

    div {
        display: block;
    }

    #ctrl{
        width: 100%;
        text-align: center;
    }

    #zoom-image {
        width: 700px;
        height: 330px;
    }

    canvas {
        left: 0;
        right: 0;
        padding: 0;
        margin: auto;
    }

---

问题是

#ctrl

的第一个子

div

；作为块元素，它将渲染为100%宽度。不应尝试使用内联元素居中技术（如

文本对齐

）居中块元素

如果您有固定的宽度（在您的例子中是700px），则始终很容易将块元素居中。设置元素的宽度，然后将其左右边距设置为

auto

将以下选择器添加到css中：

#ctrl > div {
    width: 700px;
    margin: 0 auto;
}

---

请将工作代码段或jsfiddle.add添加到画布css行

display:inline块这可能与浏览器在HTML元素上实现的不同样式有关。@MysterX不适用于IE11@Vishnu我创建了一个JSFIDLE，但它不能正常运行，因为它需要资源，不能简单地通过JSFIDLE访问这些资源。
    .title {
        text-align: center;
    }

    div {
        display: block;
    }

    #ctrl{
        width: 100%;
        text-align: center;
    }

    #zoom-image {
        width: 700px;
        height: 330px;
    }

    canvas {
        left: 0;
        right: 0;
        padding: 0;
        margin: auto;
    }

#ctrl > div {
    width: 700px;
    margin: 0 auto;
}