使用flex时垂直对齐[重复]

Posted 2023-03-05

【中文标题】使用flex时垂直对齐[重复]

【英文标题】：Vertical Align when using flex [duplicate]

【发布时间】：2021-07-29 00:57:39

【问题描述】：

我正在创建一个标题，理想情况下希望左侧的标题和右侧的导航栏图标。我可以使用设置为 dislay: flex 和 justify-content: space-between 的父 div 来实现这一点，如下所示。

Using Flex

但是，在这种情况下，我无法应用垂直对齐来水平居中对齐文本和图标。我想我可以使用 margin 让它看起来正确但不确定这是否是最好的方法。

另一方面，我可以使用display: inline-block 执行类似的操作，但是我不知道如何将图标放在右侧。

Using inline-block

我的问题是哪种方法更好，另外我如何实现所需的功能，使文本位于左侧，图标位于视口右侧，确保它们都垂直对齐？

【参考方案1】：

您可以使用align-items: center。由于您的 flex 方向是行，align-items: center 将控制垂直对齐方式。

div 
    display: flex;
    justify-content: space-between;
    width: 80%;
    align-items: center;

【参考方案2】：

如果我理解得很好 align-items: center; 搭配 justify-content: space-between 应该可以解决问题

【参考方案3】：

您可以使用align-items 在行布局中沿交叉轴垂直对齐弹性项目。

具体来说，align-items: center 因此弹性项目边距框位于横轴上的线的中心。看看更新后的CodeSandbox Demo

.container 
  display: flex;
  justify-content: space-between;
  align-items: center;

<div class="container">
  <h4>Workbench</h4>
  <span>&#9776;</span>
</div>

【参考方案4】：

这是你想要完成的吗？

header 
  display: flex;
  justify-content: space-between;
  align-items: center;

<header>
  <h1>
  Text
  </h1>
  
  <div>
  Some Icon
  </div>
</header>