Нужен совет верстальщика)
41 сообщение
#7 лет назад
Привет, я начинающий верстальщик и мне нужна помощь)Есть шапка, все содержимое (логотип, меню и телефон) должно быть выровнено по вертикали. С помощью inline-block для каждого элемента разместила все это в одну строку, но под логотипом появился лишний отступ и над навигацией. Не знаю как убрать эти отступы. Также не знаю как отцентрировать меню между логотипом и телефоном.
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, Спасибо огромное за совет!