Центрирование изображений UL в теге DIV

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

Calling изображение значка с помощью поверочного тега затем с контроль над вашим текстом и изображением значка через ваш css - путь. Конечно, вы можете удалить текст

Вот пример http://jsfiddle.net/DUjfd/