使用flexbox垂直居中放置项目

小编典典

使用flexbox垂直居中放置项目

css

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

阅读 269

2020-05-16

共1个答案

小编典典

该align-items属性适用于 flex容器 （display: flex应用于元素的元素），而不适用于 flex项 （
flex容器的 子项）。2009年的旧规格没有可比的性能align-items; box-align从2009年开始的物业符合align-content标准规格。

#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>

2020-05-16