Centering caption on a img tag inside <a> parent tags
I'd like to center a caption on an img tag contained within <a></a> tags.
Here's my HTML:
<html>
<body>
<ul>
<li>
<a>
<p><img></p>
</a>
</li>
</ul>
<body>
</html>
And here's my CSS s开发者_开发问答tylesheet:
#navigator ul li a p img{
margin: 0em 0 0 0em;
display: inline;
}
#navigator ul li a {
float:left;
padding: 0 0 0 0;
margin:0 auto 0 1em;
}
#navigator ul li a p{
padding: 0 0 0 0;
margin:0 auto 0 auto;
}
How might I go about doing this? Thanks in advance for any help.
Check out this JS Fiddle showing how I'd do it: http://jsfiddle.net/YmWnh/
I re-worked portions of your code (no closing body tag) and added some content to get the centered effect. If you structure the HTML like this:
<ul id="navigator">
<li>
<a href="#">The Caption</a>
<img src="image.jpg">
</li>
<li>
<a href="#">Caption 2</a>
<img src="image2.jpg">
</li>
</ul>
Then this CSS gets the job done:
#navigator li {
width: 100px;
float: left;
margin: 0 10px 0 0;
}
#navigator li img, #navigator li a {
display: block;
}
#navigator li a {
text-align: center;
}
The width on the li constrains the child image and anchor elements, and allows them to be centered (or not) against the li.
加载中,请稍侯......
精彩评论