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。

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

1 个答案: