将材料图标与文本对齐

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>代码，但他们并没有真正做任何事情。

＆＃13;

＆＃13;

@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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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;
}