Javascript CSS：按钮上的文本稍微偏离中心

我正在建立一个登录页，有一个按钮，文本应该居中，但它稍微在中心上方

.按钮{ 背景色：ED5E93； 字号：800； 字号：2rem； 边界：无； 颜色：白色； 填充：0 16px 0 16px； 文本对齐：居中； 垂直对齐：中间对齐； 文字装饰：无； 光标：指针； 高度：3雷姆； } 开始

---

使用flex是我通常用于这类事情的方法，而且效果非常好

这里是完整指南的链接

至于你的问题。这应该起作用：

.button {
    background-color: #ED5E93;
    font-weight: 800;
    font-size: 2rem;
    border: none;
    color: white;
    padding: 0 16px 0 16px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    height: 3rem;
}

---

使用flex是我通常用于这类事情的方法，而且效果非常好

这里是完整指南的链接

至于你的问题。这应该起作用：

.button {
    background-color: #ED5E93;
    font-weight: 800;
    font-size: 2rem;
    border: none;
    color: white;
    padding: 0 16px 0 16px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    height: 3rem;
}

使用FlexCSS属性

钮扣{ 显示器：flex； 对齐项目：居中； 证明内容：中心； 背景色：ED5E93； 字号：800； 字号：2rem； 边界：无； 颜色：白色； 填充：0 16px 0 16px； 文字装饰：无； 光标：指针； 高度：3雷姆； } 开始 使用FlexCSS属性

钮扣{ 显示器：flex； 对齐项目：居中； 证明内容：中心； 背景色：ED5E93； 字号：800； 字号：2rem； 边界：无； 颜色：白色； 填充：0 16px 0 16px； 文字装饰：无； 光标：指针； 高度：3雷姆； } 开始

---

更新：答案是字体本身。它下面有很多无法删除的空白。上面的代码适用于上下空白相等的字体。

更新：答案是字体本身。它下面有很多无法删除的空白。上面的代码使用的字体上下空白相等。

我似乎无法复制这个问题；您的示例不是简单的HTML/CSS。例如，className={indexStyles.button}我似乎无法复制这个问题；您的示例不是简单的HTML/CSS。例如，className={indexStyles.button}