使用flexbox在链接中垂直对齐文本[重复]

Question

我正在尝试在页面顶部并排创建 3 个按钮。当页面变小时，它们应该堆叠。到目前为止，这很好。我有我的按钮。我试图在全屏时将按钮的高度设置为最大 50px。问题是当我设置高度时，按钮中的文本不会垂直居中。

这是我目前所拥有的：

.flx-search {
  display:flex;
  flex-direction: row;
  flex-wrap:wrap;
  justify-content: center;
  align-items:center;


  width:1060px;
  color:#ffffff;
}

.flx-search-item {
  flex-grow:1;
  text-align:center;
  display:block;
  flex: 0 0 350px;
  height:50px;
}

<div style="background-color:#34495e;display:flex; justify-content:center;">
  <div class="flx-search">
     <a class="flx-search-item">Search Our Catalog</a>
     <a class="flx-search-item">View Patron Record</a>
     <a class="flx-search-item">Register for Programs</a>  
  </div>
</div>

JSfiddle：https://jsfiddle.net/c60t2r2k/

Answer 1

只需添加一个 line-height:50px;到 .flx-search-item。

编辑（@media 查询示例）：

.flx-search-item {
     text-align: center;
     flex: 0 0 350px;
     height: 50px;
     line-height: 50px;
}

@media (max-width:1065px) {
    .flx-search-item
    {
        flex: 0 0 700px;
    }
}
@media (max-width:710px) {
    .flx-search-item
    {
        flex: 0 0 350px;
    }
}

Answer 2

你可以让你的弹性项目成为一个嵌套的弹性容器，然后使用弹性属性使文本居中。

换句话说，将display: flex 应用于.flx-search-item。

.flx-search-item {
     display: flex;            /* new */
     align-items: center;      /* new */
     justify-content: center;  /* new */

     flex-grow: 1;
     text-align: center;
     /* display: block; <-- remove this */
     flex: 0 0 350px;
     height: 50px;
  }

Revised Demo

删除display: block 否则它将覆盖display: flex。

此外，flex: 0 0 350px 将覆盖flex-grow: 1，这是flex-grow、flex-shrink、flex-basis 的简写。

如果你想要flex-grow: 1，去掉那一行，直接使用flex: 1 0 350px。