在img标签中居中标注<a>父标签

我想标注<a></a>标签中包含的img标签。在img标签中居中标注<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; 
}

我怎么会去这样做呢？预先感谢您的帮助。

来源

2011-04-27 fello

你可以试试问一个实际的问题;-) – vindia 2011-04-27 15:12:24

大声笑，我想我忽略了它。 – fello 2011-04-27 15:15:12

你可以做一个[jsFiddle]（http://jsfiddle.net/）你的代码的例子吗？您可以使用[http://dummyimage.com/](http://dummyimage.com/）制作虚拟图像。 – thirtydot 2011-04-27 15:31:30

退房这个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宽度限制了孩子的图像和锚元素，并允许他们为中心（或不）对李。

来源

2011-04-27 16:06:15 KatieK

Katiek你钉它，换句话说里需要有一个与什么有关disploc的IMG和你已经摆在那里有什么它的意义。它的工作很棒。 – fello 2011-04-27 16:43:41

我可以看到你有一个不同的方法，如何在jsfiddle中做到这一点。我将采取这种方法，考虑到更多的语义HTML到CSS代码 – fello 2011-04-27 16:45:35

display：block;使得否则内联的元素表现为块。例如，请参阅http://www.webdesignfromscratch.com/html-css/css-block-and-inline/。是的，我对你的第一套代码做了一些非常严格的编辑。我只是用最简单的方法去说明你需要什么。 ;） – KatieK 2011-04-27 17:07:50

在img标签中居中标注<a>父标签

回答

相关问题