由于 i 标签，如何修复按钮中的不同文本对齐

Question

您可以看到“create”在顶部附近，而“project”在中间。 即使我从未给出高度，高度也不同。 当我删除 i 标签时，“项目”和“创建”都是相同的垂直对齐。 我认为问题是因为 i 标签，但我不知道如何解决它。 我想让“项目”和“创建”都放在按钮中间。 请帮忙

我已经尝试过 => 垂直居中对齐，文本居中对齐，显示 flex，在使用 span 标签包装文本后提供填充和高度

在 React 中，JSX 代码

    <NavLeft>
      <button>
        <i class="fas fa-bars"></i>project
      </button>
      <button>create</button>
    </NavLeft>

样式化的组件代码

const NavLeft = styled.div`
  ${({ theme }) => theme.flexSet()};
  font-size: 1rem;
  font-weight: 700;

  button {
    padding: 0 1rem;
    background-color: red;

    i {
      font-size: 16px;
    }
  }
`;

Answer 1

为此，只需设置display: flex; 在您的navLeft上。

我还建议您通过添加 css 来调整按钮中文本的 alignment，如下所示：

button{ 
  /* ADDED */
  display:flex;
  align-items: center;
}

演示

 #navleft{ font-size: 1rem; font-weight: 700; /*ADDED*/ display:flex; } button { padding: 0 1rem; background-color: red; /* ADDED */ display:flex; align-items: center; } button i { /*font-size: 16px;*/ font-size: 60px; /* Bigger to show the diff */ }

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <div id="navleft"> <button> <i class="fas fa-bars"></i>project </button> <button>create</button> </div>

Answer 2

你需要添加 className="flex-container"

.flex-container{
     display: flex;
     align-items: center;
     justify-content: center; /* space-between, space-evenly => use according to your need */
}