title: How to text-align:center an absolute element on IE?
body: <p>I have the code:</p>
  
  <p>html:</p>
  
  <pre><code>&lt;div class=container1&gt;
    &lt;div class=container2&gt;
      &lt;div class="box"&gt;
        &lt;div class="icon"&gt;&lt;/div&gt;
        &lt;div class="icon"&gt;&lt;/div&gt;
        &lt;div class="icon"&gt;&lt;/div&gt;
        &lt;div class="icon"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=container2&gt;
      &lt;div class="box"&gt;
        &lt;div class="icon"&gt;&lt;/div&gt;
        &lt;div class="icon"&gt;&lt;/div&gt;
        &lt;div class="icon"&gt;&lt;/div&gt;
        &lt;div class="icon"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=container2&gt;
      &lt;div class="box"&gt;
        &lt;div class="icon"&gt;&lt;/div&gt;
        &lt;div class="icon"&gt;&lt;/div&gt;
        &lt;div class="icon"&gt;&lt;/div&gt;
        &lt;div class="icon"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=container2&gt;
      &lt;div class="box"&gt;
        &lt;div class="icon"&gt;&lt;/div&gt;
        &lt;div class="icon"&gt;&lt;/div&gt;
        &lt;div class="icon"&gt;&lt;/div&gt;
        &lt;div class="icon"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.container1 {
    background: yellow;
    height: 200px;
    position: relative !important;
    width: 260px !important;
  }
  
  .container2 {
    background: blue;
    border: solid 1px;
    float: left !important;
    height: 180px;
    /*position: relative; can't use, as it would limit icons inside this container*/
    text-align: center;
    width: 60px;
    }
  .container2:hover .box {
    display: inline-block;
  }
  
  .box {
      background: red;
      border: solid 1px;
      display: none;
      height: 120px;
      position:absolute;
      text-align: center;
      top: 20px;
  
      width: 180px !important;
  }
  
  .box:first-child {
    text-align: left;
  }
  
  .icon {
    border: solid 1px;
    background: white;
    display: inline-block;
    height: 50px;
    width: 50px;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/388ygc74/10/" rel="nofollow">http://jsfiddle.net/388ygc74/10/</a></p>
  
  <p>And on IE (any version) the text-align:center does not work.</p>
  
  <p>The solution to make <code>.box</code> width:100% is not applicable, I need it to be a fixed defined width.</p>
  
  <p>Any idea?</p>