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