CSS文本对齐中心在IE11上不起作用

Question

我有一个画布和一个重叠的图像。 在chrome和firefox上，center-align属性工作得很好，但是在IE上不起作用。 画布未居中，但图像居中。 我尝试过将画布和图像居中的其他方法，但是没有任何效果。

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

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

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

<div id="graph-content">
   <div id="ctrl">
     <div>
        <canvas draggable="false" unselectable="true" width="700" height="330"></canvas>
        <img id="img" data-src-template=".." data-qx-class="rrdGraphPng" unselectable="true" draggable="false" src=".." />
     </div>
   <div>
</div>

这是CSS：

    div{
        display: block;
    }

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

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

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

这是在浏览器中生成的：

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;
}

这是一个jsfiddle 。 它无法正常运行，因为它需要访问无法通过jsfiddle管理的资源。

Answer 1

经过广泛的试验，我终于找到了一种适用于所有浏览器的解决方案。 这不是最好的解决方案，但目前只有一个：

    .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;
    }

Answer 2

问题是#ctrl的第一个div子#ctrl ； 作为块元素，它将呈现为100％的宽度。 您不应尝试使用内联元素居中技术（例如text-align ）来使块元素居中。

如果您有固定的宽度（在您的情况下为700像素），始终很容易将块元素居中。 设置元素的宽度，然后将其左右边距设置为auto 。

将以下选择器添加到CSS：

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