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

您可以将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;
  }

Revised Demo

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

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

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

Answer 2

添加一个行高：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;
    }
}

使用flexbox

2 个答案: