Екатерина Г.
41 сообщение
#7 лет назад
Привет, я начинающий верстальщик и мне нужна помощь)

Есть шапка, все содержимое (логотип, меню и телефон) должно быть выровнено по вертикали. С помощью inline-block для каждого элемента разместила все это в одну строку, но под логотипом появился лишний отступ и над навигацией. Не знаю как убрать эти отступы. Также не знаю как отцентрировать меню между логотипом и телефоном. 
Михаил Копча
330 сообщений
#7 лет назад
Прикрепите архив или выложите код, что бы не гадать что и как.
Екатерина Г.
41 сообщение
#7 лет назад
FLAKE_MDM,  Сейчас вот такая проблема: логотип выстроился правильно, навигация правильно (но я не знаю почему), а телефон в одной строке с навигацией. мне нужно, чтобы он был поцентрирован по вертикали. И нужен ли inline-block? Или нужен float? Страдаю шапкой уже несколько дней)

html

<header>

<div class="container">

<div class="logo" href="index.html">
<img src="images/logo.png" alt="Логотип компании">
</div><!--

--><div class="nav">
<a href="index.html">Главная</a>
<a href="services.html">Услуги</a>
<a href="price-list.html">Прайс-лист</a>
<a href="offices.html">Офисы</a>
<a href="contacts.html">Контакты</a>
</div><!--

--><div class="phone">+7 (495) 374-72-77</div>
</div>

</header>


css

/*      ---    ШАПКА    ---      */

header {
height: 140px;
}

/*   Логотип   */
.logo {
display: inline-block;
padding: 30px 0;
}

/*   Навигация   */
.nav {
display: inline-block;
}

/*   Телефон     */
.phone {
display: inline-block;
font-size: 20px;
text-align: right;
}
Роман Палесика
1 сообщение
#7 лет назад
Советовал бы вам использовать display: table для шапки, идеально бы подошло для ваших нужд. CSS примерно следующий:
  header {display: table; height: 140px; width: 100%;}
  header .logo {display: table-cell; vertical-align: middle;}
  header nav {display: table-cell; vertical-align: middle;}
  header .phone {display: table-cell; vertical-align: middle;}
Екатерина Г.
41 сообщение
#7 лет назад
iguodala, Спасибо огромное за совет!