我在按钮中有一个图像和一个跨度,并且我尝试使用:
但是如果我不向图像添加1px的填充顶部,则div中的文本似乎并没有真正垂直对齐,而span文本看起来很好,我也不知道为什么。
HTML
<button class="metabolite-btn">
<img src="/images/metabolite/icon_question.svg" class="metabolite-btn__image">
<span class="metabolite-btn__text">代謝物質とは</span>
</button>
CSS
.main-wrapper {
.metabolite-btn {
width: $vw-size-115-width-375;
border-radius: 14px;
border: none;
height: 28px;
background-color: $main-color;
padding: 0 0 0 5px;
text-align: left;
cursor: pointer;
&__image {
width: $vw-size-20-width-375;
padding: 1px 0 0 0;
}
&__text {
font-size: $vw-size-12-width-375;
font-weight: bold;
color: $white;
line-height: 28px;
}
}
要垂直对齐两个元素,需要在作为按钮的父元素上添加display:flex
和align-items: center
(如下所示)
//CSS
button {
display: flex;
align-items: center;
}