flex inside grid - 垂直对齐中心最后一行[重复]答案

【问题标题】：flex inside grid - vertical align center last row [duplicate]flex inside grid - 垂直对齐中心最后一行[重复]
【发布时间】：2021-01-17 10:41:47
【问题描述】：

在下面的示例中，如何将GO Y CENTER 垂直放置在中心
即为什么align items:center 不起作用
另外，我可以在不使用flex 的情况下使用grid 做同样的事情吗？

.apanel{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 140px));
    justify-content: center;
    grid-column-gap:15px;
    grid-row-gap:25px;
    width:calc(100% - 30px);
    margin:0 auto;
    text-align:center;
}
.apanel .card{
    display:flex;
    flex-direction:column;
    background:#eee;
}
.apanel .title{
    line-height:1.5em;
    padding:9px 14px;
    background:gold;
    flex:1;
    align-items:center;
}

<div class='apanel'>
<a class='card' href='#'>
<div class='sub'>LOREM</div>
<div>1-2-3</div>
<div class='title'>GO Y CENTER</div>
</a>
<a class='card' href='#'>
<div class='sub'>LOREM</div>
<div>1-2-3</div>
<div class='title'>LOREM IPSUM DOLOR SIT AMET CONSECTETUR</div>
</a>
</div>

【问题讨论】：

标签： html css flexbox css-grid

【解决方案1】：

因为.title 不是display: flex 并且 display 不是继承属性，所以您不能使用任何 flex 属性，如 align-items。您还必须在.title 中定义display: flex。

.apanel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 140px));
  justify-content: center;
  grid-column-gap: 15px;
  grid-row-gap: 25px;
  width: calc(100% - 30px);
  margin: 0 auto;
  text-align: center;
}

.apanel .card {
  display: flex;
  flex-direction: column;
  background: #eee;
}

.apanel .title {
  line-height: 1.5em;
  padding: 9px 14px;
  background: gold;
  flex: 1;
  display: flex;
  align-items: center;
}

<div class='apanel'>
  <a class='card' href='#'>
    <div class='sub'>LOREM</div>
    <div>1-2-3</div>
    <div class='title'>GO Y CENTER</div>
  </a>
  <a class='card' href='#'>
    <div class='sub'>LOREM</div>
    <div>1-2-3</div>
    <div class='title'>LOREM IPSUM DOLOR SIT AMET CONSECTETUR</div>
  </a>
</div>

【讨论】：