Material2 图标和标题文本 CSS 未正确对齐

Question

我在 Angular 应用程序中使用 material2 图标时遇到了样式问题。具体来说，我有一个按钮，同时显示 material2 图标和一些文本 - 彼此相邻，从左到右运行。现在图标在按钮的中心对齐，但按钮的文本在该图标下方对齐，以免在按钮上居中。

这是我的 HTML：

<div id="wizard-container">
  <div class="intake-step-item">
    <span><i class="material-icons md-28">face</i></span><span class="intake-step-title">General</span>
  </div>
  <div class="intake-step-item">
    <span><i class="material-icons md-28">perm_contact_calendar</i></span><span class="intake-step-title">Availability</span>
  </div>
</div>

这是相关的 css：

#wizard-container {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  z-index: -10;
}

.intake-step-item {
    background: #d7d7d7;
    width: 160px;
    height: 30px;
    margin: 5px;
    padding: 10px;
    border-radius: 15px;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    z-index: 100;
}

.intake-step-item > .active {
  background: #46AB61;
}

.intake-step-title {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
}

.material-icons.md-28 { 
  font-size: 28px; 
  padding: 4px; }

我尝试在标题文本上使用负边距和负边距，但这没有任何区别。我需要做什么才能让每个按钮的标题文本在按钮的中心对齐？

Answer 1

你只需要

#wizard-container .intake-step-item {
  display: flex;
}

工作示例：

#wizard-container {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  z-index: -10;
}

.intake-step-item {
    background: #d7d7d7;
    width: 160px;
    height: 30px;
    margin: 5px;
    padding: 10px;
    border-radius: 15px;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    z-index: 100;
    display: flex;
}

.intake-step-item > .active {
  background: #46AB61;
}

.intake-step-title {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
}

.material-icons.md-28 { 
  font-size: 28px; 
  padding: 4px; }

<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/css/materialize.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/js/materialize.min.js"></script>



<div id="wizard-container">
  <div class="intake-step-item">
    <span><i class="material-icons md-28">face</i></span><span class="intake-step-title">General</span>
  </div>
  <div class="intake-step-item">
    <span><i class="material-icons md-28">perm_contact_calendar</i></span><span class="intake-step-title">Availability</span>
  </div>
</div>

但是，感觉您的 CSS 与 Material Design guidelines 有点冲突。

注意：在部署到生产环境之前不要忘记autoprefix。