title: css text-align center not working on IE11
body: <p>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. </p>
  
  <p>I'm using this <a href="https://github.com/oetiker/RrdGraphJS" rel="nofollow noreferrer">library</a> for displaying interactive RRD Graphs. It uses the <a href="https://www.qooxdoo.org/" rel="nofollow noreferrer">qooxdoo</a> 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())</p>
  
  <p>My goal is to overlap the canvas &amp; image and center them horizontally.</p>
  
  <p>This is my html (after javascript has added the canvas):</p>
  
  <pre><code>&lt;div id="graph-content"&gt;
     &lt;div id="ctrl"&gt;
       &lt;div&gt;
          &lt;canvas draggable="false" unselectable="true" width="700" height="330"&gt;&lt;/canvas&gt;
          &lt;img id="img" data-src-template=".." data-qx-class="rrdGraphPng" unselectable="true" draggable="false" src=".." /&gt;
       &lt;/div&gt;
     &lt;div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is the css:</p>
  
  <pre><code>    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;
      }
  </code></pre>
  
  <p>This is what is generated in the browser:</p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>Here is a <a href="https://jsfiddle.net/MerveSahin/89bv9eob/" rel="nofollow noreferrer">jsfiddle</a>. It does not run properly, because it needs access to resources, that cannot be managed over jsfiddle.</p>