带有图标的按钮中的文本未垂直居中

Question

我正试图创建一个带有图标的按钮，但当我添加图标时，文本并没有垂直居中。我该怎么解决这个问题？

这是HTML&CSS：

<a href="#">
<button class=" account signUp"><span class="icon-profile</span>button</button>
</a>

.signUp {
background-image: var(--orange-background);
border-image: var(--orange-background);
font-family: poppins;
font-weight: 600;
color: white;
}

Answer 1

但当我添加图标时，文本不是垂直居中的

将以下两个属性放在其父上

.parent-of-icon-and-text {
display: grid;
place-content: center;
}

请不要使用按钮和链接，选择最适合您的场景的一个。要将按钮用作链接，可以将其放入表单中。

.signUp {
background-image: var(--orange-background);
border-image: var(--orange-background);
font-family: poppins;
font-weight: 600;
color: white;
}

<form onsubmit="#">
<button type="submit" class="account signUp"><span class="icon-profile"></span>button</button>
</form>

Answer 2

修正

• 将<button>放置在<a>nchor中是无效的HTML。它们都是交互式内容，不应该将非交互式内容作为子节点<a>nchor已删除。有关更多详细信息，请参阅是否可以使用HTML5在<a>中嵌套<button>元素。

• HTML中的打字，缺少">：

<span class="icon-profile"></span>

• 在CSS中，Poppins的font-family值被拼错为poppins(font-family值区分大小写(

解决方案

OP是不完整的，因此示例中建议的内容尽可能通用。在OP中，span.icon-profile需要这两种样式：

display: inline-block;
vertical-align: middle

vertical-align将通过预设值或legnth值将标签的内容设置到垂直位置。

vertical-align需要display: inline-block或table-cell

更多详细信息请参见下面的示例

/* 
The actual CSS to resolve alignment issues explianed by OP is marked with a ✼ which are `display: inline-block` and `vertical-align: middle` 
*/ 
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
/*
Global default for font
*/
:root {
font: 2ch/1 Poppins;  
}
/*
Any rem unit measurements will reference 1rem to 2ch
*/
body {
font-size: 2ch;
}
button,
b {
display: inline-block; /*✼*/
font-weight: 300;
}
.sign-up {
font: inherit;
border-radius: 4px;
color: white;
background: #333;
}
.btn-link:hover {
outline: 1px solid cyan;
color: cyan;
cursor: pointer;
}
.btn-link:active {
outline: 2px solid cyan;
color: black;
background: white;
}
.icon-profile {
font-size: 1rem;
vertical-align: middle; /*✼*/
}
/*
content: '⚙️' 
in HTML it's ⚙️
*/
.icon-profile::before {
content: '026990fe0f';
}

<button class="account sign-up btn-link"><b class="icon-profile"></b> Profile</button>