CSS - центрировать изображение по горизонтали внутри ли

Question

Удивительно, как я не могу просто вытащить такую ​​простую задачу.

Мы хотим, чтобы меню (список ul) отображалось в строке, где сверху у нас есть изображение, а внизу у нас есть привязка.

Примерно так:

  <iimg>    <iimg>    <iimg>
 <anchor>  <anchor>  <anchor> 

Решение должно быть действительно и для IE 7.

Я пробовал выравнивание текста по центру изображения. Неудачно; Я пробовал показ: блок; на li, на -img на обоих ... Я также определил ширину здесь и там (но изображения могут иметь переменную ширину (не уверен)); Я пробовал поле: 0 авто; но это сосредотачивается на странице, но не на LI. : ///

Могу ли я помочь здесь, плз?

http://jsfiddle.net/4E7Lu/

Answer 1

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

Просто обязательно внесите исправление после ul.Как в:

<div style="clear: both;"></div>

Answer 2

Если вы сделаете отображение ul как inline-block и установите для якоря и изображения отображение block, вы можете центрировать их с помощью margin: 0 auto;.

http://jsfiddle.net/4E7Lu/1/

Answer 3

Только что видел, может помочь.

http://css.maxdesign.com.au/listamatic/horizontal01.htm

Answer 4

Я бы применил изображение как фоновое изображение к каждому элементу li. Его легко позиционировать с помощью background-position, и ваша разметка HTML остается чистой для SEO. Затем вы можете использовать CSS sprites , чтобы ускорить загрузку изображений.