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

[BlooDSikeR]

Здравствуйте,столкнулся с проблемой,не могу выровнять в горизонтальном меню картинки,сейчас это выглядит вот так http://slayers.zz.vc/ ,а нужно что бы ссылки были под картинками.

 

<style>

.menu_head{

float:right;

margin-top:17px;

display:table;

}

.menu_head li{

display:table-row;

float:left;

}

.menu_head li a{

display:table-cell;

text-align:center;

}

</style>

 

<ul class="menu_head">

<li><a href="#"><img src="img/home.png"/>Про комплекс</a></li>

<li><a href="#"><img src="img/key.png"/>Квартири</a></li>

<li><a href="#"><img src="img/shopping.png"/>Покупцям</a></li>

<li><a href="#" class="current"><img src="img/gallery.png"/>Галерея</a></li>

<li><a href="#"><img src="img/speaker.png"/>Новини</a></li>

<li><a href="#"><img src="img/email.png"/>Контакти</a></li>

</ul>

[Great Rash]

Добавьте <br> после картинки.

[satantx]

.menu_head{float:right;margin-top:17px;display:table;}.menu_head li{float:left;text-align: center;}.menu_head li span {display:block;}

Оберни тест в ссылке в span

[afdw]

.menu_head li {

margin: 0 10px;

}

.menu_head li a img {

display: block;

width: 46px;

height: 46px;

margin: auto;

}

[BlooDSikeR]

Добавьте <br> после картинки.

О боже,на сколько все оказалось легко.А я что только не перепробовал. 

Спасибо большое!

Добавьте <br> после картинки.

а нет,не все так просто) https://yadi.sk/i/6UtfdBRzeuHYS

вот так и раньше получалось,а нужно что бы ссылки выравнивались в одну линию

[Great Rash]

нужно что бы ссылки выравнивались в одну линию

Так сделайте все картинки одинаковыми по высоте. Берёте самую высокую, допустим она будет 100px по высоте, и все остальные в фотошопе делаете такими же по высоте (если надо добавляете пустое место вокруг иконки).

[BlooDSikeR]

 

нужно что бы ссылки выравнивались в одну линию

Так сделайте все картинки одинаковыми по высоте. Берёте самую высокую, допустим она будет 100px по высоте, и все остальные в фотошопе делаете такими же по высоте (если надо добавляете пустое место вокруг иконки).

 

ну дело в том что мне дали тестовое задание на собеседовании,и я пытаюсь сделать все максимально точно как на макете,не изменяя графических элементов)) а там картинки то разной высоты)вот практически завершил,остались маленькие нюансы http://f-picture.net/lfp/s018.radikal.ru/i527/1502/28/301bc95a4dca.png/htm

Edited February 26, 2015 by BlooDSikeR

[Great Rash]

В таком случае можно вообще убрать картинку из <a>, вместо этого задать <a> фиксированный отступ сверху (допустим те же 100px), а затем добавить картинку на бекграунд.

Или обернуть <img> в <span>, которому задать фиксированную высоту, а внутри выровнять картинку по вертикали.