如何将文本置于图标下方

Question

我希望在每个图标下而不是右侧放置文本（如现在所示）。

以下是fiddle链接：http://jsfiddle.net/ZLkwt/

#middle {
 margin: 0 auto;
 width: 1050px;
 height: 175px;
 margin-top: 89px;
}


#icons {
 width: 502px;
 height: 68px;
 font-size: 11px;
}
.icon_middle {
 float: right;
 text-align: bottom-center;
 width: 100px;
 height: 85px;
}

<div id="middle">
 <div class="icon_middle"><img src="images/smart_tv.jpg" align="middle">Smart TV</div>
 <div class="icon_middle"><img src="images/tablet.jpg" align="middle">Tablet</div>
 <div class="icon_middle"><img src="images/iphone.jpg" align="middle"></div>
 <div class="icon_middle"><img src="images/android.jpg" align="middle">Android</div>
 <div class="icon_middle"><img src="images/pc.jpg" align="middle">Pc</div>
 <div class="icon_middle"><img src="images/mac.jpg" align="middle">Mac</div>
 <div id="middle_txt">
 <h1>dfgdfgdfgd</h1><div id="middle_border"></div><h2> dfgdfgdfgdg </h2>
 </div><!--close_middle_txt-->
  </div><!--middle-->

- alonblack

---

在图标和文本之间简单添加一个 <br>。 - tschiela

Answer 1

#middle {
    margin: 0 auto;
    width: 1050px;
    height: 175px;
    margin-top: 89px;
}

.icon_middle {
        width:50px;
    float: right;
    width: 100px;
    height: 85px;
}
.icon_middle span {
    display:block;
}

<div id="middle">
    <div class="icon_middle"><img src="images/bg.png" align="middle"><span>Smart TV</span></div>
    <div class="icon_middle"><img src="images/bg.png" align="middle"><span>Tablet</span></div>
    <div class="icon_middle"><img src="images/bg.png" align="middle"><span>Tablet</span></div>
    <div class="icon_middle"><img src="images/bg.png" align="middle"><span>Android</span></div>
    <div class="icon_middle"><img src="images/bg.png" align="middle"><span>Pc</span></div>
    <div class="icon_middle"><img src="images/bg.png" align="middle"><span>Mac</span></div>
    <div id="middle_txt">
    <h1>dfgdfgdfgd</h1><div id="middle_border"></div><h2> dfgdfgdfgdg </h2>
    </div><!--close_middle_txt-->
  </div><!--middle-->

- Asraful Haque

Answer 2

如果您无法修改HTML，则可以将img的display:block设置为块级元素。

.icon_middle img {
  display: block;
}

- Bill Criswell