将材料图标与文本对齐答案

【问题标题】：align material icon with the text将材料图标与文本对齐
【发布时间】：2018-02-09 23:50:25
【问题描述】：

我在下面的代码中使用 Material 图标，但图标有一些样式，使图标与文本不对齐。你知道怎么让图标和文字对齐吗？

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

【问题讨论】：

将图标与文本对齐是什么意思？我也没有在 JSFiddle 中看到任何图标
对不起，我更新了小提琴。
这能回答你的问题吗？ Align material icon with text on Materialize

标签： css

【解决方案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>

【讨论】：

【解决方案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;
}

【讨论】：