24

我正在尝试使用 CSS 的 flexbox 将项目垂直居中；而且，我知道如何使用非供应商前缀代码来做到这一点，但即使使用供应商前缀，我也无法让它在 Webkit (Chrome) 中工作。

我正在尝试垂直对齐#trigger 中的跨度。

这是我的CSS：

#trigger{
    /* 2009 syntax */
    display: -webkit-box;
    display: box;
    /* current syntax */
    display: -webkit-flex;
    display: flex;
}

#trigger span{
    /* 2009 syntax */
    -webkit-box-align: center;
    /* current syntax */
    -webkit-align-items: center;
    flex-align: center;
}

任何想法我做错了什么？

如果您知道我正在使用的其他供应商前缀/属性版本，请随时分享它们，以便它可以在不仅仅是 Webkit 中工作。

4

2 回答 2

42

该align-items属性适用于弹性容器（display: flex应用到它们的元素），而不是弹性项目（弹性容器的子项）。旧的 2009 规范没有与align-items;相媲美的属性。2009 年的box-align房产符合align-content标准规格。

http://jsfiddle.net/mnM5j/2/

#trigger {
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  text-align: center;
  height: 10em;
  background: yellow;
}

<div id="trigger">
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta elit vel ante hendrerit facilisis. Curabitur aliquam sollicitudin diam, id posuere elit consectetur nec.</span>
</div>
于 2013-03-31T11:33:25.513 回答
9

可以使用以下属性实现垂直对齐的布局，请注意这是使用旧语法，尽管我已经在 Chrome、Firefox 和 Firefox Aurora 的最新版本上进行了测试 -

#trigger {
  width: 200px;
  height: 200px;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-box-pack: center;
  -webkit-box-align: center;

  display: -moz-box;
  -moz-box-orient: vertical;
  -moz-box-pack: center;
  -moz-box-align: center;

  display: box;
  box-orient: vertical;
  box-pack: center;
  box-align: center;
}

#trigger span {
  display: block;
}

box-orient指定盒子的孩子应该如何对齐，在我们的例子中是垂直的。

box-pack沿着 box-orient 轴对齐子元素。

box-align对齐盒子内的孩子，它的轴垂直于盒子方向轴，即在我们的例子中，因为盒子方向是垂直的，它将决定孩子水平的对齐方式。

这是一个Codepen 演示，我在 span 元素上应用的属性并非display: block纯粹用于装饰目的。

于 2013-03-31T08:00:59.310 回答