Question

我想将标题置于img标记中包含的<a></a>标记的中心。

这是我的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;
}

我该怎么做呢？提前感谢您的帮助。

Answer 1

看看这个JS小提琴，展示我是如何做到的：http://jsfiddle.net/YmWnh/

我重新处理了部分代码（没有关闭正文标记）并添加了一些内容以获得居中效果。如果你像这样构建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居中（或不居中）。

在<a> parent tags</a>内的img标记上居中标题

1 个答案: