将标题置于内的 img 标签上居中；父标签

发布于 2024-11-03 12:16:27 字数 615 浏览 5 评论 0原文

我想将标题置于标记中包含的 img 标记上。

这是我的 HTML：

<html>
<body> 
   <ul>
       <li>
          <a>
            <p><img></p>
          </a>
      </li>
   </ul>
<body>
</html>

这是我的 CSS 样式表：

#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;
}

我该如何去做呢？预先感谢您的任何帮助。

原文

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 stylesheet:

#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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

惜醉颜 2024-11-10 12:16:27

看看这个 JS Fiddle 展示了我如何做到这一点： http://jsfiddle.net/YmWnh/

I重新设计了部分代码（没有结束正文标记）并添加了一些内容以获得居中效果。如果您像这样构造 HTML：

<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>

那么这个 CSS 就可以完成工作：

#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;
}

li 上的宽度约束子图像和锚元素，并允许它们相对于 li 居中（或不居中）。

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.

回复收藏 0 原文

~没有更多了~