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

Posted 2023-03-05

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

【英文标题】：Aligning text vertically within a link using flexbox [duplicate]

【发布时间】：2016-04-26 16:21:51

【问题描述】：

我正在尝试在页面顶部并排创建 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/

【参考方案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;
    

【讨论】：

问题是当它缩小时，高度保持 50px 而不是缩小，并且文本垂直偏离中心

好的。实际上，似乎所有三个按钮都垂直居中，但在可用空间介于 700 和 1050px 之间时显示为 2 行。您可以使用@media 查询来解决这种情况。

【参考方案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。

【讨论】：

我应用了它，但只有一件事。有没有办法在页面缩小时使高度缩放？

对于缩放，是的。你可以使用viewport units。对于悬停，您的目标是错误的父级：DEMO（水平调整窗口大小以获得缩放效果；悬停有效）。

非常感谢，我只是想知道是否有办法在没有媒体查询的情况下做到这一点

如您所见，没有媒体查询 :-)

感谢您的帮助！