html - 图片上方的文字

Question

我想做一个导航栏，每个元素都有自己的图像，上面写着元素的名称。所以应该有几张图片排成一排，每张图片上都写了一些文字。这是我得到的图像行:

<div class="navigation" align="center">
<a href="link1"><img src="images/bn_blue.png" width="120" height="70" alt="" /></a>
    <a href="link2"><img src="images/bn_blue.png" width="120" height="70" alt="" /></a>
    <a href="link3"><img src="images/bn_blue.png" width="120" height="70" alt="" /></a>
    <a href="link4"><img src="images/bn_blue.png" width="120" height="70" alt="" /></a>
    <a href="link5"><img src="images/bn_blue.png" width="120" height="70" alt="" /></a>
    <a href="link6"><img src="images/bn_blue.png" width="120" height="70" alt="" /></a>
</div>  

Answer 1

<div class="navigation" align="center">
<ul><li><a href="link2"><div style="background-image:url(images/bn_blue.png);width:120px;height:70px">xyz</div></a></li>
<li><a href="link2"><div style="background-image:url(images/bn_blue.png);width:120px;height:70px">xyz</div></a></li>
<li><a href="link2"><div style="background-image:url(images/bn_blue.png);width:120px;height:70px">xyz</div></a></li>
<li><a href="link2"><div style="background-image:url(images/bn_blue.png);width:120px;height:70px">xyz</div></a></li>
<li><a href="link2"><div style="background-image:url(images/bn_blue.png);width:120px;height:70px">xyz</div></a><li>
</ul>
</div> 
<style>
li
{
display:inline-block;
}
</style>