Html 将两列与图像和文本并排放置

大家好目前我有以下几点：

.iconcontainer.first、.iconcontainer.second{
显示：内联块；
}
.iconcontainer img{
显示：块；
保证金：0自动；
文本对齐：居中；
宽度：50%；
身高：50%；
}
p{
文本对齐：居中；
字体系列：'Lato'，无衬线；
字体大小：400；
}
富勒姆先生{
背景色：#FEF1D9；
身高：100%；
}

我想把这个放在第一张图片下面

我想把这个放在第二张图片下面

具有
内联
或
内联块
的两个元素之间始终有一个空格。您可以通过执行
float:left
来浮动这两个元素

如果要使用
内联块
请确保删除
空格
或
换行
以删除它们之间的空格

在您的情况下，您必须这样做：

<div class='iconcontainer first'>
    <img class='homeicons1' src="http://localyz.com/wp-content/uploads/2014/09/local-seo-reviews-icon.png">
    <p>I want this under first image</p>
  </div><div class='iconcontainer second'>
  <img class='homeicons1' src="http://www.pd4pic.com/images800_/flat-keyboard-theme-typing-icon-types.png">
  <p>I want this under second image</p>
</div>

首先，在HTML中过早关闭
，纠正这一点，使两个
成为兄弟

内联块
也会渲染空白，有很多方法可以避免空白，使用字体大小技巧是迄今为止最简单的方法


.fulliconcontainer{
字号：0；
}
.iconcontainer.first、.iconcontainer.second{
显示：内联块；
垂直对齐：顶部；
字体大小：16px；
宽度：50%；
身高：50%；
}
.iconcontainer img{
显示：块；
保证金：0自动；
文本对齐：居中；
宽度：50%；
身高：50%；
}
p{
文本对齐：居中；
字体系列：'Lato'，无衬线；
字体大小：400；
}
富勒姆先生{
背景色：#FEF1D9；
身高：100%；
}

我想把这个放在第一张图片下面

我想把这个放在第二张图片下面


.iconcontainer.first, .iconcontainer.second{
  display: inline-block;
  width:50%;
  height:50%;
}

.iconcontainer img {
  display: block;
  margin: 0 auto;
  text-align: center;
  width: 100%;
  height: 100%;
}

p {
  text-align: center;
  font-family: 'Lato', sans-serif;
  font-weight: 400;
}

.fullhome{
  background-color: #FEF1D9;
  height: 100%;
}