Question

我遇到了CSS问题。我的情况如下

<div>
<ul>
<li> <img src="a.jpg" ></li>
<li> <img src="a.jpg" ></li>
<li> <img src="a.jpg" ></li>
<li> <img src="a.jpg" ></li>
</ul>
</div>

我想将所有UL标签放在中心位置，但图像必须保持对齐。

当我使用text-align：center时，我将图像作为中心。但是，ul中的最后一张图像显示在中心，我不想显示。

任何人都可以帮助我吗？在此先感谢。

Answer 1

像这样写：

div{text-align:center}
ul{
 display:inline-block;
 *display:inline;/* for IE7 */
 *zoom:1;
 text-align:left;
}

Answer 2

尝试这样的事情

HTML

<div id="menu">
  <ul>
    <li><span></span><a href="">Add Some Text</a></li>
    <li><span></span><a href="">Add Some Text</a></li>
    <li><span></span><a href="">Add Some Text</a></li>
    <li><span></span><a href="">Add Some Text</a></li>
    <li><span></span><a href="">Add Some Text</a></li>
  </ul>
</div>

CSS

#menu li {
 clear: left;
}

#menu li a {
 padding: 5px 0 0 40px;
 display:block;
}

#menu li span {
 float: left;
 display: block;
 height: 32px;
 width:32px;
 background: url(images/icon.png) no-repeat;
}

使用span标记调用图标图像，然后通过css控制文本和图标图像是可行的方法。当然你可以删除文本

以下是示例http://jsfiddle.net/DUjfd/

在DIV标签中居中UL图像

2 个答案: