使用flexbox在链接内垂直对齐文本

Damien 发表于 Dev

达米安

我正在尝试创建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/

迈克尔·本杰明

您可以将flex项目设置为嵌套的flex容器，然后使用flex属性将文本居中。

换句话说，适用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;
  }

修改后的演示

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

此外，flex-grow: 1正被重写flex: 0 0 350px，这对于速记flex-grow，flex-shrink，flex-basis。

如果需要flex-grow: 1，请摆脱该行，然后使用flex: 1 0 350px。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。