internet explorer 8 ignores width for 'display: table-cell' element

Question

According to quirks mode, internet explorer 8 does support table options for display property, but in this example it exhibits very strange behaviour
http://jsfiddle.net

Answer 1

1. If text-align: center isn't working, can you try the following, instead (unless you have some reason that using the table layout is necessary). This is generally the preferred method of centering any block layout element. Using text-align center is a fallback when necessary, but less reliable in my experience - you can't use it for nested divs, etc.

   img {
       display: block;
       margin-left: auto;
       margin-right: auto;
   }
   

2. If you need to do a custom override for IE, the easiest way is to use an external stylesheet, and supply the following in your section:

   Supply that stylesheet below the ordinary one, and it should override it. If it does, you can always resort to supplying !important tags at the end of statements you need to override (though it's always preferable to avoid that unless absolutely necessary, as it messes up the inheritance for child elements, and you constantly have to remember it). For example:

   .root img {
       text-align: left !important;
       ...
   }