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

Question

I am running into a styling issue while using material2 icons in my Angular app. Specifically, I have a button displaying both a material2 icon and some text - next to each other, running left to right. Right now the icons are aligning in the center of the button, but the text of the button is aligning below that icon, so as not to be centered on the button.

Here's my 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>

And here's the relevant 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; }

I tried using negative margin and negative padding on the title text, but that didn't make any difference. What do I need to do to get the title text of each button to align in the center of the button?

Answer 1

All you need is

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

Working example:

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

However, it feels like your CSS somewhat conflicts with Material Design guidelines .

Note: Don't forget to autoprefix before you deploy to production.