0

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

@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

我错过了什么吗？

4

2 回答 2

5

IE10 没有实现 2009 年 Flexbox 规范，它实现了 2012 年 3 月的草案。

这应该是您需要的：

.foo {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -webkit-flex-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -moz-box-align: center;
  -webkit-flex-line-pack: center;
  -ms-flex-line-pack: center;
  -webkit-align-content: center;
  align-content: center;
}

我确实有一组用于 Flexbox 的 Sass mixin，可以为您正确处理所有前缀，您现在可以免费使用： https ://gist.github.com/cimmanon/4461470 。它们已提交给 Compass 项目，并且应该在下一个版本中可用。

于 2013-04-21T15:59:56.363 回答
3

这在 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;
于 2013-04-21T15:57:14.447 回答