Question

我正在尝试使用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中使用。

Answer 1

align-items属性适用于 flex容器（应用了display: flex的元素），而不是 flex items （的子项） 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>

Answer 2

垂直对齐的布局可以通过以下属性实现，请注意这是使用旧的语法，尽管我已经测试了Chrome，Firefox和Linux的最新版本。 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-align对齐盒子内的孩子，它的轴垂直于盒子方向轴，即在我们的情况下，因为盒子方向是垂直的，它将决定孩子们水平对齐。

这是一个Codepen demonstration，我在display: block以外的span元素上应用的属性纯粹是出于美观目的。

使用flexbox垂直居中项目

2 个答案: