Как решить проблему c ul?

Question

[Артём Цымбалюк]

Наверное самый глупый вопрос на тостере.
Но всё же, голова уже кипит, видимо я что -то забыл..



нужно сделать ul список как на картинке ниже, но у меня не получается во первых, поставить li элементы по центру номеров телефонов, и иконку с телефоном по центру номер телефона.

только учусь, поймите правильно)

<div class="top-mnu">
							<ul>
								<li><a href="">Главная</a></li>
								<li><a href="">Готовые решения</a></li>
								<li><a href="">Примеры работ</a></li>
								<li><a href="">Контакты</a></li>
								<li>
									<div class="phone">
										<img src="img/phone.svg" alt="">
										<span>[phone]</span><br>
										<span>[phone]</span>	
									</div>
								</li>
							</ul>
						</div>

.top-mnu
	text-align: center
	li
		display: inline-block
		padding-right: 15px

.phone
	height: 60px

Answer 1

[Александр Петров]

1) в тег li заключай только пункты меню. телефон не надо туда лепить.
2) саму картинку с иконкой сделай просто такой же высоты как и блок.

Я бы вот так сделал:

<div class="top-mnu">
              <ul>
                <li><a href="">Главная</a></li>
                <li><a href="">Готовые решения</a></li>
                <li><a href="">Примеры работ</a></li>
                <li><a href="">Контакты</a></li>
                <li>
                  <div class="phone">
                    <img src="img/phone.svg" alt="">
                   <div class="block_content_phone">
                          <span>[phone]</span><br>
                           <span>[phone]</span>	
                   </div>
                    <div class="clear"></div>
                  </div>
                </li>
              </ul>
            </div>

Для картинки и .block_content_phone сделай float:left;

Answer 2

[Aleksandr]

vertical-align: middle;
А картинку сделай background

Comments

[Артём Цымбалюк]

.logo
width: 267px
height: 111px
margin: 0 auto
margin-bottom: 3px

.top-mnu
text-align: center
li
display: inline-block
padding-right: 15px

.phone
height: 60px
vertical-align: middle
background: url(../img/phone.svg)
background-repeat: no-repeat

с картинкой разобрался, а как теперь сделать li элементы на ровне с div'ом phone ? а то они прижаты к низу

[Артём Цымбалюк]

Александр Котов

[Aleksandr]

для li напишите vertical-align: middle

[Артём Цымбалюк]

Александр Котов спасибо большое