如何使用flexbox垂直居中链接（按钮）内容？

Question

我的某些项目右侧有一个按钮抽屉。 HTML是这样的：

<article class="item">
  <p class="text">Long content</p>
  <div id="buttons">
    <a class="button">Remove Favorite</a>
    <a class="button">Delete</a>
    <a class="button">Comment</a>
  </div>
</article> 

我将它们安排在一个列中：

#buttons { 
  display: flex;
  flex-direction: column;
}

然后我让他们用：

占据他们容器的全尺寸

.button { 
  flex: 1;
} 

到目前为止看起来像是什么：

问题是，每个按钮的文本与容器的顶部对齐，但我希望它在每个按钮中居中垂直，即文本位于每个按钮的中心。有没有办法用flexbox做到这一点？

这里是完整的代码：

＆＃13;

＆＃13;

.item {
  display: flex;
  background-color: #bbb;
}
.text {
  flex: 1;
}
#buttons {
  display: flex;
  flex-direction: column;
  background-color: #ddd;
}
.button {
  flex: 1;
  padding: 1em;
  border: 1px solid #aaa;
  background-color: #eee;
}

＆＃13;

<article class="item">
  <p class="text">
    Herp derpsum perp dee derp, mer herderder. Sherp berp derpler, herpem serp tee perper merpus terp dee. Sherpus berps herpsum herpler. Berps herderder herpsum herpderpsmer herp? Derperker der herpler derp derpsum berps perp sherpus. Merpus mer perper derpler perp tee. Berps derpus, derpler ler mer nerpy herpem derp der derps. Terp tee herpsum derpus der nerpy herpderpsmer dee. Merpus derp terp ner sherlamer. Derps herpler serp derpus. Derpler sherlamer derpy sherp sherper, ler dee derps. Ler ner derp herpsum sherp. Ler merpus, derp der derpy derperker perp. Der derpler sherlamer herp mer. Herpler derpus mer, derps ner herpy! Merpus herp, nerpy merp herderder. Ler herpsum derperker herpderpsmer herderder perper sherp. Serp derpler herderder berps. Derpus mer, merp derp herpler. Herpem terp serp derps herpsum sherper.
  </p>
  <div id="buttons">
    <a class="button">Remove Favorite</a>
    <a class="button">Delete</a>
    <a class="button">Comment</a>
  </div>
</article>

＆＃13;

＆＃13;

＆＃13;

Answer 1

目前，您的按钮只是弹性项目。你也可以让它们成为flex容器：

.button {
  display: flex;       /* Magic begins */
  align-items: center; /* Center contents vertically */
}

.item {
  display: flex;
  background-color: #bbb;
}
.text {
  flex: 1;
}
#buttons {
  display: flex;
  flex-direction: column;
  background-color: #ddd;
}
.button {
  flex: 1;
  padding: 1em;
  border: 1px solid #aaa;
  background-color: #eee;
  display: flex;       /* Magic begins */
  align-items: center; /* Center contents vertically */
}

<article class="item">
  <p class="text">
    Herp derpsum perp dee derp, mer herderder. Sherp berp derpler, herpem serp tee perper merpus terp dee. Sherpus berps herpsum herpler. Berps herderder herpsum herpderpsmer herp? Derperker der herpler derp derpsum berps perp sherpus. Merpus mer perper derpler perp tee. Berps derpus, derpler ler mer nerpy herpem derp der derps. Terp tee herpsum derpus der nerpy herpderpsmer dee. Merpus derp terp ner sherlamer. Derps herpler serp derpus. Derpler sherlamer derpy sherp sherper, ler dee derps. Ler ner derp herpsum sherp. Ler merpus, derp der derpy derperker perp. Der derpler sherlamer herp mer. Herpler derpus mer, derps ner herpy! Merpus herp, nerpy merp herderder. Ler herpsum derperker herpderpsmer herderder perper sherp. Serp derpler herderder berps. Derpus mer, merp derp herpler. Herpem terp serp derps herpsum sherper.
  </p>
  <div id="buttons">
    <a class="button">Remove Favorite</a>
    <a class="button">Delete</a>
    <a class="button">Comment</a>
  </div>
</article>