html - 由于内容的原因，并排大小的框未正确垂直对齐

Question

我有这些并排的响应框，里面有图像和文本。但是，由于文本的原因，某些框未正确对齐。我试图改变这一点，但没有成功。

这是问题的图片:https://imgur.com/a/EpXzG4i

这是 HTML:

<div id="grid">
  <span class="box">
    <i class="fa fa-file-text fa-3x"></i>
    <div class="service">Super awesome box</div>
  </span>

  ...

</div>

还有 CSS:

#grid {
  width: 100%;
}
#grid .box {
  display: inline-block;
  width: 135px;
  height: 135px;
  margin: 11px;        
  background-color: #b7cfdd; 
}
#grid .box .service {
  font-family: "Roboto", sans-serif;
  font-size: 17px;
  color: #555;
}
#grid .box i {
  margin-top: 20px;
  color: #00406e;
}

在这里您可以看到实际的问题:http://jsfiddle.net/et72powz/3/

这个问题有简单的解决方法吗？

Answer 1

您的 HTML 无效。 division 标签不能嵌套在 span 中。制作 span div 就可以了。

利用 vertical-align 将它们很好地对齐。

http://jsfiddle.net/et72powz/15/

#grid .box {
  display: inline-block;
  width: 135px;
  height: 135px;
  margin: 11px;        
  background-color: #b7cfdd; 
  vertical-align: top
}