Не центрируется по вертикали

@Dima2282 · Регистрация: 06.04.2015

Студворк — интернет-сервис помощи студентам

Добрый день, подскажите почему в данном случае надпись Waxom не центрируется по вертикали через line-height

HTML5
1
2
3
4
5
6
7
8
9
<body>
        <div class="header">
            <div class="header-logo">
                <a href="#"><img class="logo-picture" src="img/logo.png" alt="logo"></a>
                <a href="#"><span class="logo-name">Waxom</span></a>
            </div>
            
        </div>
</body>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.header {
  background: #000;
  padding: 2.5625rem 0 0 0;
  height: 3.6rem;
}
.header-logo {
  float: left;
}
.logo-name {
  font-family: 'Raleway', sans-serif;
  color: #fff;
  font-size: 2.125rem;
  line-height: 3.6rem;
}
.header-logo a {
  text-decoration: none;
}

@atanov · 22.03.2019, 11:09

Dima2282, а относительно чего она должна центроваться?

@Dima2282 · 22.03.2019, 11:18 **[ТС]**

Относительно header и ему задана высота 3,6rem

CSS
1
2
3
4
5
.header {
background: #000;
padding: 2.5625rem 0 0 0;
height: 3.6rem;
}

А потом

CSS
1
2
3
.logo-name {
line-height: 3.6rem;
}

@atanov · 22.03.2019, 11:28

Dima2282, то ли Вы не понимаете, что делаете, то ли не правильно объясняете. Как Вы собираетесь относительными размерами шрифта "центровать"? Для выравнивания есть множество различных способов, но размеров шрифта... Это через чур.

@mrtoxas · 22.03.2019, 11:42

Сообщение от atanov

Для выравнивания есть множество различных способов

И это один из них

Dima2282, padding у хедера уберите и сделайте его высоту при помощи height.

@atanov · 22.03.2019, 12:00

Сообщение от mrtoxas

И это один из них

не самый...

@Dima2282 · 22.03.2019, 12:21 **[ТС]**

Сообщение от mrtoxas

И это один из них

Dima2282, padding у хедера уберите и сделайте его высоту при помощи height.

padding у хедера убрал но а высота там уже была задана

CSS
1
2
3
4
.header {
  background: #000;
  height: 3.6rem;
}

но это ни как не помогло

Сообщение от atanov

Dima2282, то ли Вы не понимаете, что делаете, то ли не правильно объясняете. Как Вы собираетесь относительными размерами шрифта "центровать"? Для выравнивания есть множество различных способов, но размеров шрифта... Это через чур.

Много раз слышал что можно центровать вертикально при помощи line-height если текст состоит из одной строчки.
Дайте свой вариант

Комментарий модератора

Используйте соответствующие теги в редакторе для форматирования кода [HTML], [CSS] и т.д.!

@mrtoxas · 22.03.2019, 18:10

Сообщение от Dima2282

но это ни как не помогло

https://codepen.io/anon/pen/KEbXKm

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.header {
  background: #000;  
  height: 6.6rem;
}
.header-logo {
  float: left;
}
.logo-name {
  font-family: 'Raleway', sans-serif;
  color: #fff;
  font-size: 2.125rem;
  line-height: 6.6rem;
}
.header-logo a {
  text-decoration: none;
}

@Dima2282 · 22.03.2019, 20:13 **[ТС]**

Сообщение от mrtoxas

https://codepen.io/anon/pen/KEbXKm

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.header {
  background: #000;  
  height: 6.6rem;
}
.header-logo {
  float: left;
}
.logo-name {
  font-family: 'Raleway', sans-serif;
  color: #fff;
  font-size: 2.125rem;
  line-height: 6.6rem;
}
.header-logo a {
  text-decoration: none;
}

Спасибо за ответ, но здесь вы просто увеличили высоту и при этом картинка поднимается вверх а надпись по середине,

а нужно чтобы надпись была по середине самого лого, вот этот шаблон
http://psd-html-css.ru/templat... y-stranicy

@mrtoxas · 22.03.2019, 20:30

Сообщение от Dima2282

а нужно чтобы надпись была по середине самого лого

Было бы не плохо знать это изначально

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.header {
  background: #000;  
  height: 6.6rem;
}
.header-logo a {
  vertical-align: middle;
  text-decoration: none;  
  display: inline-block;  
}
.logo-name {
  color: #fff;
  font-size: 2.125rem;
  line-height:6.6rem;
}

Добавлено через 2 минуты
А зачем вам аж две ссылки в логотипе? Текст и лого ведут на разные страницы?

@Dima2282 · 22.03.2019, 20:31 **[ТС]**

Нет ссылка одна, это был метод тыка разделить картинку и надпись

@mrtoxas · 22.03.2019, 20:38

HTML5
1
2
3
4
5
6
7
8
<div class="header">
  <div class="header-logo">
    <a href="" class="header-logo-link">
      <img class="logo-picture" src="img/logo.png" alt="logo">
      <span class="logo-name">Waxom</span>
    </a>
  </div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.header {
  background-color: #000;  
  height: 6.6rem;
}
.header-logo-link {
  text-decoration: none;  
  line-height:6.6rem;
}
.header-logo-link span,
.header-logo-link img{
  vertical-align: middle;
}
.logo-name {
  color: #fff;
  font-size: 2.125rem;  
}

@Dima2282 · 22.03.2019, 20:46 **[ТС]**

просто не понятен момент
- если мы задали vertical-align: middle и для картиники и для надписи, то зачем тогда нужно еще задавать line-height, и наоборот почему что то одно не центрирует по вертикали?
- почему vertical-align: middle нужно задавать непосредственно в span и в img а не классу .header-logo-link ?

@mrtoxas · 22.03.2019, 20:56

1. Тут нет связи между line-height и vertical-align. Первым свойством мы располагаем элементы по центру heder'a, а вторым – выравниваем элементы относительно друг-друга.
2. Можно было бы, если header-logo-link был ячейкой в таблице. В ином случае, назначается непосредственно элементам, которые надо выровнять.

@Dima2282 · 26.03.2019, 10:18 **[ТС]**

Просто если я правильно понимаю то задав .header-logo-link: line-heigh 6.6 мы выровняли и картинку и текст по центру, но они находятся на baseline по умолчанию, и для того чтобы спустить img ниже задаем ему middle, но тогда не понятно зачем задавать middle тексту?

Новые блоги и статьи Все статьи Все блоги /
Символические и жёсткие ссылки в Linux. algri14 15.03.2026 Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая ссылка» (hard link),. . .	[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ФедосеевПавел 14.03.2026 Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .	делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью	SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:
Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .

@atanov 640 / 481 / 172 Регистрация: 26.05.2016 Сообщений: 2,674
	22.03.2019, 11:09
	Dima2282, а относительно чего она должна центроваться? 0

@atanov 640 / 481 / 172 Регистрация: 26.05.2016 Сообщений: 2,674
	22.03.2019, 11:28
	Dima2282, то ли Вы не понимаете, что делаете, то ли не правильно объясняете. Как Вы собираетесь относительными размерами шрифта "центровать"? Для выравнивания есть множество различных способов, но размеров шрифта... Это через чур. 0

@Dima2282 0 / 0 / 0 Регистрация: 06.04.2015 Сообщений: 122
	22.03.2019, 20:31 [ТС]
	Нет ссылка одна, это был метод тыка разделить картинку и надпись 0

@Dima2282 0 / 0 / 0 Регистрация: 06.04.2015 Сообщений: 122
	22.03.2019, 20:46 [ТС]
	просто не понятен момент - если мы задали vertical-align: middle и для картиники и для надписи, то зачем тогда нужно еще задавать line-height, и наоборот почему что то одно не центрирует по вертикали? - почему vertical-align: middle нужно задавать непосредственно в span и в img а не классу .header-logo-link ? 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	22.03.2019, 20:56
	1. Тут нет связи между line-height и vertical-align. Первым свойством мы располагаем элементы по центру heder'a, а вторым – выравниваем элементы относительно друг-друга. 2. Можно было бы, если header-logo-link был ячейкой в таблице. В ином случае, назначается непосредственно элементам, которые надо выровнять. 0

@Dima2282 0 / 0 / 0 Регистрация: 06.04.2015 Сообщений: 122
	26.03.2019, 10:18 [ТС]
	Просто если я правильно понимаю то задав .header-logo-link: line-heigh 6.6 мы выровняли и картинку и текст по центру, но они находятся на baseline по умолчанию, и для того чтобы спустить img ниже задаем ему middle, но тогда не понятно зачем задавать middle тексту? 0