Centering caption on a img tag inside <a> parent tags_问答_开发者

Centering caption on a img tag inside <a> parent tags

开发者 https://www.devze.com 2023-03-01 05:46 出处：网络

I\'d like to center a caption on an img tag contained within <a></a> tags. Here\'s my HTML:

相关专题：centering css

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.