使用下面的标题水平对齐图像

Question

我努力呈现两个水平对齐的图像，下面是文字。这是我的代码：

HTML

<div class="selectGame">
  <div id="computerIcon" class = "icon">
    <img src="http://lorempixel.com" >
    <span class ="iconText"><p>VS Computer</p></span>
  </div>
  <div id="humanIcon" class = "icon">
    <img src="http://lorempixel.com" >
    <span class ="iconText"><p>VS Human</p></span>
  </div>
</div> 

CSS

.icon img{
  float: left;
  width: 40%;
}

.iconText p{
  clear: both;
}

Answer 1

把浮动：左边和宽度：40％放在.icon类而不是.icon img - so

上

.icon {
  float: left;
  width: 40%;
}

Answer 2

你走在正确的轨道上，非常接近。对于浮动元素，请务必也浮动父元素，在本例中为div.icon

.icon {
    float: left;
}

JSFiddle Link