[英]Vertically aligning image and span inside div
我在一個按鈕中有一個圖像和一個跨度,我嘗試使用:
但是如果我不向圖像添加 1px padding-top,它在 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;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.