本文介绍了如何将文本放在图标下的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想将文字放在每个图示下方,而不在他的右边(现在)
i want to place the text under every icon and not in the right of him (as it now)
这里是小提琴连结:
<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">
推荐答案
<!DOCTYPE html>
<html>
<head>
<style>
#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;
}
</style>
</head>
<body>
<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-->
</body>
</html>
这篇关于如何将文本放在图标下的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!