Getting text to display under an image in a navigation
I want my navigation to look like this:
<icon> <icon> <icon>
Title Longer Title Title
Ideally, I want my code to look like:
<li>
<img src="images/icon.png" />
<a class="link_title">Title 1</a>
</li>
<li>
<img src="images/icon.png"/>
<a class="link_title">Title 2</a>
</li>
<li>
<img src="images/icon.png"/>
<a class="link_title">Title 3</a>
</li>
I already have it horizontal, but not sure how to get the link to appear right under the i开发者_如何学Gocon, without using a table, which I don't want to do. (Let me know if I must, though.)
li { text-align:center; }
li a.link_title { display:block; }
Also, you're closing your <a>
tags with a </span>
. This needs to be corrected:
<a class="link_title">Some Text</a>
try this:
li {
float:left;
text-align:center;
}
li a {
display:block;
}
li img {
margin:0 auto;
}
精彩评论