Горизонтальные ссылки для ссылок в вертикальном меню

Question

Борьба за изучение html/css Я столкнулся с проблемой с несколькими решениями, но у меня нет идей, которые являются лучшим решением для четкого и правильного кода.

Я хочу горизонтально центрировать ссылки (изображения) внутри вертикального меню. Это меню должно содержаться в div с фиксированной высотой и шириной - #menu. Я буду использовать высоту меню #, чтобы нажать еще один div.

Я искал в Интернете и нашел много способов сделать это: UL, используя напрямую и id без какого-либо div, содержащего его, div, содержащий UL, даже только div и ul в css без форматирования для ul li или ul li a. Теперь у меня мозги - полный беспорядок. В какой-то момент я решил об этом, но я уверен, что это не самый лучший и простой способ сделать это:

http://jsfiddle.net/luisse/hpLQ6/

HTML код:

<div id="content"> 
<div id="menu"> 
<ul> 
<li><a href="#"><img src="http://i.imgur.com/Cgl5XKV.jpg"></a></li> 
<li><a href="#"><img src="http://i.imgur.com/Gk93KeN.jpg"></a></li> 
<li><a href="#"><img src="http://i.imgur.com/iIk5FoO.jpg"></a></li> 
</ul> 
</div> 
</div> 

CSS:

html, body { 
height: 100%; 
padding: 0; 
margin: 5px; 
} 
body { 
background-color:black; 
} 
* { 
margin: 0; 
padding: 0; 
} 


#content { 
background-color: #999999; 
height: 600px; 
width: 100px; 
} 


#menu { 
background-color: #C0C0C0; 
width: 60px; 
height: 120px; 
margin-left: auto; 
margin-right: auto; 
} 
ul { 
list-style: none; 
width: 60px; 
display: table; 
} 
ul li { 
height: 20px; 
margin-top: 10px; 
} 
ul li a { 
text-decoration: none; 
} 

Не могли бы вы посоветовать мне, что это лучший способ сделать это? Спасибо.

Answer 1

вы можете установить li, чтобы центрировать все его содержимое. Это все, что вам нужно, чтобы центрировать ссылки.

ul li { 
    text-align:center; 
} 

Хотя UL получает некоторый запас в браузерах по умолчанию, так что добавление следующих к уль избавляется от странного края до сих пор.

ul { 
    margin:0px; 
}