html - CSS:将divs插入容器

我将这部分html和css放在一起以显示主页的特色项，但是由于某些原因，框的内容似乎使框浮动到包含div的底部，并且这取决于文本的数量盒子变得错位了。

我希望这些框都保持相同的高度，并且都沿着蓝色div的顶部对齐。

CSS：

@import url(http://fonts.googleapis.com/css?family=Bree+Serif);
@import url(http://fonts.googleapis.com/css?family=Open+Sans);

.icon_css { background: url(http://fauxbyte.esy.es/_codepen_resources/icon_css.png) #FFF; background-size: 80px; background-repeat: no-repeat; background-position: center; }
.icon_php { background: url(http://fauxbyte.esy.es/_codepen_resources/icon_php7.png) #FFF; background-size: 75px; background-repeat: no-repeat; background-position: center; }
.icon_jquery { background: url(http://fauxbyte.esy.es/_codepen_resources/icon_jquery.gif) #FFF; background-size: 110px; background-repeat: no-repeat; background-position: center; }
.icon_bootstrap { background: url(http://fauxbyte.esy.es/_codepen_resources/icon_bootstrap.gif) #FFF; background-size: 160px; background-repeat: no-repeat; background-position: center; }

body { margin: 0px; }

h1 {
  text-align: center;
  font-family: 'Bree Serif', 'serif';
  font-size: 50px;
  color: #444;
  font-weight: lighter;
}

.featuredItemWrap {
  background: #E7E7E7;
  width: 250px;
  height: inherit;
  display: inline-block;
  margin-right: 5px;
  margin-left: 5px;
  margin-top: 25px;
  text-align: center;
}

.featuredItemOuterWrap {
  background: #009CEF;
  width: 100%;
  height: auto;
  padding-bottom: 20px;
  text-align: center;

}

.featuredItemInner {
}

.featuredItemDesc {
  background: none;
  padding: 0px 20px 40px 20px;
  color: #444;
  font-family: 'Open Sans', sans-serif;
}

.featuredItemDesc h1 {
  font-family: 'Bree Serif', 'serif';
  font-size: 25px;
}

.featuredItemIcon {
  width: 150px;
  height: 150px;
  margin-left: auto;
  margin-right: auto;
  margin-top: -40px;
  border-radius: 50%;
  border: 10px solid #E7E7E7;
}

CodePen

最佳答案

您可以对.featuredItemOuterWrap容器及其内部项目使用flex布局：

.featuredItemOuterWrap{
  display:flex;
  justify-content:center;
}

CodePen