在 ul li div 中居中我的图像答案

【问题标题】：center my image inside ul li div在 ul li div 中居中我的图像
【发布时间】：2013-02-08 13:52:33
【问题描述】：

我在页脚中放置了一张图片，我希望它居中，但我不会工作我希望我的图像居中所以我希望有人可以帮助我看看我的代码

HTML

<div class="center">
                <ul>
                    <li><a href="#" target="_blank" class="centering_"></a></li>

                </ul>
            </div>

CSS：

.center 
{
    width: 84px;    
    margin: 0 auto;
}
.center ul 
{
    width: 209px;
    line-height: normal;  

}
.center ul li 
{
    float: left;
    margin-right: 11px;

}
.center ul li.last 
{
    margin-right: 0px;
}
.center ul li a
{   
    display: block;
    height: 33px;
    width: 33px;
}

.centering_ {background: transparent url('../images/hello.png') no-repeat;}

编辑：这是 jsFiddle 中的一个示例：http://jsfiddle.net/XJbaM/

在我的代码中，我的页脚中有两个图标，我想要的是删除页脚中的右图标和左图标，图标上方的文本已经居中

已解决

【问题讨论】：

这只是您的帖子中的错字还是您在.centering_ 之前忘记了.？
你能把这个贴在 jsfiddle 或 jsbin 上，以便我们看到一个工作示例吗？很难分辨什么是错字，什么不是。
您想要将锚点居中，而不是图像。
在此处创建您的问题的重复示例 jsfiddle.net 在没有更多信息的情况下建议解决方案将是很大的努力
检查我的 jsfiddle：jsfiddle.net/XJbaM

标签： html css

【解决方案1】：

像这样添加一个包装器 div。

<div>
  <ul>
      <li>
          <div class="wrapper">
              <a href="img"></a>
          </div>
      </li>
  </ul>

以及用于包装器的 css：

.wrapper {
       margin:0 auto;
       width: /* how big your img is PX EM % etc */;
       text-align:center;
}

我在浏览器中对此进行了测试，并且可以正常工作。这是我使用的确切代码：您和我的混合

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.center 
{
    width: 784px;    
    margin: 0 auto;
    border: 1px solid #000;
}
.center ul 
{
    width: 709px;
    line-height: normal;  

}
.center ul li 
{
    float: left;
    margin-right: 11px;
    border: 1px solid #000;
    width:500px;

}
.wrapper {
    margin:0 auto;
    width:500px;
    text-align:center;
}
.center ul li.last 
{
    margin-right: 0px;
}
.center ul li a
{   
    display:inline-block;
    height: 33px;
    width:100px;
}
.clear {
    clear:left;
}

.centering_ {background-image:url(img/activenav.png);
background-repeat:no-repeat;}
</style>
</head>

<body>
<div class="center">
                <ul>
                    <li><div class="wrapper"><a href="#" target="_blank" class="centering_"></a></div></li>

                </ul>
            <div class="clear">ss</div>
            </div>  
</body>
</html>

现在我的海盗战利品呢？

【讨论】：

我忘记在包装 div 中添加“text-align:center”。
嘿查尔斯！只是想说谢谢你的解决方案。它绝对帮助我在列表项中居中显示图像。谢谢！

【解决方案2】：

在整个 div 周围放置

和标签。它将使 div 居中。

<CENTER>
<div class="center">
                <ul>
                    <li><a href="#" target="_blank" class="centering_"></a></li>

                </ul>
            </div>  
</CENTER>

【讨论】：

让我们鼓励非弃用的 HTML 好吗？
现已弃用