css text-align center not working on IE11

Question

I have a canvas and an overlapping image. On chrome and firefox the center-align property works perfectly fine, however it doesn't work on IE. The canvas is not centered, but the image is. I have tried alternative ways for centering both the canvas and image, but nothing works.

I'm using this library for displaying interactive RRD Graphs. It uses the qooxdoo framework. The canvas is created by this library, is that a possible reason for it? (FYI: the canvas is created in the rrdGraphPng.js file in method: __addCanvas())

My goal is to overlap the canvas & image and center them horizontally.

This is my html (after javascript has added the canvas):

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

This is the 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;
    }

This is what is generated in the browser:

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

Here is a jsfiddle . It does not run properly, because it needs access to resources, that cannot be managed over jsfiddle.

Answer 1

After extensive experimenting I finally found a solution, that works on all browsers. It's not the best solution, but for now the only one:

    .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

The problem is the first div child of #ctrl ; as a block element, it will render as 100% width. You should not try to center block elements, using inline elements centering techniques (like text-align ).

It's always easy to center a block element if you have a fixed width (in your case 700px). Set the width of the element and then set its left and right margins to auto .

Add the following selector to your css:

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