將材質圖標與文本對齊

Question

我在下面的代碼中使用“材質”圖標，但是該圖標具有某些樣式，使該圖標與文本不對齊。 您知道如何將圖標與文本對齊嗎？

https://jsfiddle.net/u127zxak/1/

 @font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; src: url(https://fonts.gstatic.com/s/materialicons/v36/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2'); } .material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; background-color: red; display: inline; } .alert { position: relative; padding: 0.75rem 1.25rem; margin-bottom: 1rem; border: 1px solid transparent; border-radius: 0.25rem; } .alert-info { color: #0c5460; background-color: #d1ecf1; border-color: #bee5eb; } .alert-info hr { border-top-color: #abdde5; } .alert-info .alert-link { color: #062c33; } 

 <div class="alert alert-info" role="alert"> <span><i class="material-icons">face</i></span> <span> Test </span> </div> 

Answer 1

將圖標<i>為vertical-align: middle; 。

我還要刪除<span>標簽，它們實際上並沒有做任何事情。

 @font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; src: url(https://fonts.gstatic.com/s/materialicons/v36/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2'); } .material-icons { vertical-align: middle; /* new */ font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; background-color: red; display: inline; } .alert { position: relative; padding: 0.75rem 1.25rem; margin-bottom: 1rem; border: 1px solid transparent; border-radius: 0.25rem; } .alert-info { color: #0c5460; background-color: #d1ecf1; border-color: #bee5eb; } 

 <div class="alert alert-info" role="alert"> <i class="material-icons">face</i> Test </div> 

Answer 2

使用flex可以完美對齊項目，

<div class="alert alert-info" role="alert">
  <i class="material-icons">face</i>

  <span class="text">
    Test
  </span>
</div>

並在CSS中

.alert {
    display: flex;
    ...
}

.alert .text {
    align-self: center;
}