1

I am trying to adapt the solution from this question: Vertically align text in a div (answer by Neftas)

<html>
     <head>
       <title>Universal vertical center with CSS</title>
     </head>

     <body>
        <div style="height: 100px; border: solid;">
            <div style = "position: relative; top: 50%; transform: translateY(-50%);">This is vertically aligned text within a div</div>
        </div>
     </body>
 </html>

This works fine in modern IEs, but not work in IE8. enter image description here

I found this http://www.useragentman.com/IETransformsTranslator/ converter that converts TranslateY(-50%) call into matrix.

So, I made my code in that way:

 <html>
     <head>
       <title>Universal vertical center with CSS</title>
     </head>

     <body>
        <div style="height: 100px; border: solid;">
            <div style = "position: relative; top: 50%; transform: translateY(-50%); -ms-filter: progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=1, SizingMethod='auto expand');">This is vertically aligned text within a div</div>
        </div>
     </body>
 </html>

But the inner div still stays in wrong vertical position, like matrix were never applied. enter image description here

P.S. I know about display: table-cell but this leads to another bugs in IE8.

Community
  • 1
  • 1
Kosmo零
  • 4,001
  • 9
  • 45
  • 88
  • Thank you, but those answers aren't on my question. Those are about displaying quotes, but mine about setting style. `SizingMethod="auto expand"` of course this will never work. – Kosmo零 Feb 11 '15 at 11:26
  • @Quentin - Please, reopen my question. It's a different case of "out of quotation marks" problem. – Kosmo零 Feb 11 '15 at 11:30
  • Both questions are about putting quote characters in attribute values. It doesn't matter what the attribute is used for. The problem and the solution are the same. – Quentin Feb 11 '15 at 11:31
  • "Something like this will never work: `SizingMethod="auto expand"` " — Yes it will. The HTML parser will replace `"` with `"` before passing it to the CSS parser. – Quentin Feb 11 '15 at 11:32
  • @Quentin - I really tested it, but I see no effect of this transformation. – Kosmo零 Feb 11 '15 at 11:33
  • That is still how you fix the problem you asked about. Having looked at [the documentation for `filter`](https://msdn.microsoft.com/en-us/library/ms533014%28v=vs.85%29.aspx), it turns out that you misdiagnosed your problem in the first place … you shouldn't have quotes around the entire value at all! – Quentin Feb 11 '15 at 11:34
  • @Quentin - ok, thank you for answers. The transformation no works even in this way: `-ms-filter: progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=1, SizingMethod='auto expand');`, so it might be something wrong with the values. – Kosmo零 Feb 11 '15 at 11:37
  • What browser (and version) are you testing in? – Quentin Feb 11 '15 at 11:40
  • I testing it in IE8. Trying to solve vertical aligning by: ` Universal vertical center with CSS
    This is vertically aligned text within a div
    ` and this http://www.useragentman.com/IETransformsTranslator/ since IE8 does not supports transform.     – Kosmo零 Feb 11 '15 at 11:44
  • Well, if you edit the question to focus on the actual problem, it could be reopened. – Quentin Feb 11 '15 at 11:50
  • @Quentin - I totally edited my question. – Kosmo零 Feb 11 '15 at 12:02

0 Answers0