在IE 10中使用ms

在IE 10中使用ms-box的垂直中心文本(Vertical center text using ms-box in IE 10)

这是一个在框中垂直居中文本的混合

@mixin box-center(){ /* Firefox */ display:-moz-box; -moz-box-orient:horizontal; -moz-box-pack:center; -moz-box-align:center; /* Safari and Chrome */ display:-webkit-box; -webkit-box-orient:horizontal; -webkit-box-pack:center; -webkit-box-align:center; /* IE10 -Doesn't work! */ display: -ms-box; -ms-box-orient:horizontal; -ms-box-pack:center; -ms-box-align:center; }

这在Chrome和Firefox中完美运行。

但当然它在IE 10中无法正常工作（我尚未在旧版IE中测试过）。 文字保持在顶部。

这是一个jsfiddle

我错过了什么吗？

Here is a mixin to vertically center text in a box

@mixin box-center(){ /* Firefox */ display:-moz-box; -moz-box-orient:horizontal; -moz-box-pack:center; -moz-box-align:center; /* Safari and Chrome */ display:-webkit-box; -webkit-box-orient:horizontal; -webkit-box-pack:center; -webkit-box-align:center; /* IE10 -Doesn't work! */ display: -ms-box; -ms-box-orient:horizontal; -ms-box-pack:center; -ms-box-align:center; }

This works perfectly in Chrome and Firefox.

But of course it doesn't work right in IE 10 (I haven't tested in older version of IE yet). The text stays at the top.

Here is a jsfiddle

Am I missing something?

最满意答案

这在IE 10上对我来说很好。这里是小提琴屏幕截图： http ： //img189.imageshack.us/img189/9135/eae7aabb6f494aeb8410553.png

display: -ms-flexbox; -ms-flex-align: center; -ms-flex-pack: center; -ms-box-orient:horizontal;

This works fine for me on IE 10. Here's the fiddle Screenshot: http://img189.imageshack.us/img189/9135/eae7aabb6f494aeb8410553.png

display: -ms-flexbox; -ms-flex-align: center; -ms-flex-pack: center; -ms-box-orient:horizontal;