帶有圖標的按鈕中的文本未垂直居中

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

更正

• HTML 將<button>放在<a>錨點內是無效的。 它們都是交互式內容，不應該將惰性內容作為后代節點。 <a>錨點已被刪除。 有關詳細信息，請參閱我可以使用 HTML5 將<button>元素嵌套在<a>中嗎？ .

• HTML 中的錯字， ">缺失：

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

• 在 CSS 中， Poppins的font-family值被錯誤拼寫為poppins （ font-family值區分大小寫）。

解決方案

OP 不完整，因此示例中建議的內容盡可能通用。 在 OP 中， span.icon-profile需要這兩個 styles：

display: inline-block;
vertical-align: middle

vertical-align將標簽的內容設置為垂直 position 通過預設值或 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: '\002699\00fe0f'; }

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