如何放置文本在圖標

Question

我想放置文本的每個圖標下，而不是在他的權利（如現在）

這裏是小提琴鏈接：http://jsfiddle.net/ZLkwt/

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

 

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

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

Answer 1

如果無法修改HTML，則只需製作imgdisplay: block即可。

.icon_middle img { 
    display: block; 
} 

Answer 2

#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-->