Почему эти ли не центры?

Я пытаюсь получить эти элементы списка в центре в списке, но я не могу понять проблему. Вот код:Почему эти ли не центры?

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <link href="my.css" rel="stylesheet" type="text/css"> 
</head> 
    <body> 
     <div id="centerDiv"> 
      <ul class="centerUL"> 
       <li><a href="http://www.amazon.com">Amazon 1</a></li> 
       <li><a href="http://www.amazon.com">Amazon 2</a></li> 
       <li><a href="http://www.amazon.com">Amazon 3</a></li> 
      </ul> 
     </div>  
    </body> 
</html>

CSS

#centerDiv { 
    width: 330px; 
    text-align: center; 
    border: 1px solid red; 
} 
.centerUL { 
    width: 70%; 
    margin: 2px auto; 
    line-height: 1.4; 
    border: 1px solid green; 
} 
li { 
    display: inline; 
    text-align: center; 
    border: 1px solid orange; 
}

источник

2013-11-27 Conrad

Если вы не используете CSS Reset, вы должны. http://www.cssreset.com/

Сброс CSS будет нормализовать ваши элементы, чтобы вы знали, как они будут действовать; что ожидать от них.

По умолчанию ul s и ol s будет иметь левый отступы на них, для пуль :)

http://jsfiddle.net/MXGz5/

.centerUL { 
    width: 70%; 
    margin: 2px auto; 
    padding: 0; /* this new line */ 
    line-height: 1.4; 
    border: 1px solid green; 
}

... ixes вопрос.

источник

2013-11-27 02:42:35 Ming

Лучшим решением является использование text-align:center; для элемента ul и набор display:inline-block; для элементов li.

ul{ 
text-align:center; 
} 
ul li{ 
display:inline-block; 
}

DEMO

источник

2013-11-27 02:52:04

Это не центрировать элементы списка в списке - в 'отступы: 0;' необходимо, как уже упоминалось выше. – Conrad

Почему эти ли не центры?

ответ

Смежные вопросы