Inline-block + vertical-align

@thedude · Регистрация: 31.05.2014

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

Приветствую, помогите разобраться. Практиковался, наткнулся на примерчик и озадачился. Для наглядности добавил анимацию. По умолчанию элементы выстроены по базовой линии. При первом чекеде меняется вертикальный отступ margin-top и становится -18px, базовая линия тянется вверх (почему то -18px предел тут, не знаю почему). После второго чекеда vertical-align:middle. И тут не понятное мне поведение, inline-block-и подпрыгивают вверх, будто выстраиваются по центру относительно верхней границы родителя (логичнее было им выравниваться по центру относительно буквы X). Что по чем вообще?
https://jsfiddle.net/wrpooczq/7/

HTML5
1
2
3
4
5
6
7
8
9
<input type="checkbox" class="click1"/>
<input type="checkbox" class="click2"/>
<div class="container">X
  <div class="item prev">1</div>
  <div class="item prev">2</div>
  <div class="item prev">3</div>
  <div class="item curr">4</div>
  <div class="item next">5</div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
.click1:checked ~ div > div { animation: effects 2s linear forwards; }
.click2:checked ~ div > div {vertical-align:middle;}
.container {
  border-radius: 5px;
  display: inline-block;
  background: #ccc;
  height: 50px;
  margin-top: 30px;
  
}
.item {
  border-radius: 50%;
  display: inline-block;
  color: #fff;
  height: 40px;
  line-height: 40px;
  margin-right: 40px;
vertical-align:baseline;
  text-align: center;
  width: 40px;
}
 
.item:last-child {
  margin-right: 0;
}
.prev {
  background: #b2d235;
}
.curr {
  background: #ab4a9c;
}
.next {
  background: #ccc;
  color: #000;
}
@keyframes effects {
  0% {margin-top:0px;}
  100% {margin-top:-18px; }
}

Добавлено через 10 минут
Ну по счет того, почему за пределы не выходит, вроде бы стало понятно. Потому что каждый блок имеет собственный контекст форматирования благодаря свойству display:inline-block

Добавлено через 3 часа 48 минут
Скорее по тому, что текстовое содержимое не может оторваться от базовой линии и выйти за пределы из-за маргина

@thedude · 13.01.2017, 15:31 **[ТС]**

Что никто не знает почему так происходит?

@Fedor92 · 13.01.2017, 15:47

thedude, вот Вы парадоксы спрашиваете...

Текст указанный в блоке является плавающим и с точки зрения вёрстки не является самостоятельным элементом... Правило:

CSS
1
.click2:checked ~ div > div {vertical-align:middle;}

применяется к дивам, а Ваш то элемент не в диве, соответственно и стили к нему не применяются...

@thedude · 13.01.2017, 16:26 **[ТС]**

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

применяется к дивам, а Ваш то элемент не в диве

Как так, а хде тогда он? Оо

@Fedor92 · 13.01.2017, 16:30

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

Как так, а хде тогда он? Оо

Он плавающий! Что означает строка?

CSS
1
.click2:checked ~ div > div {vertical-align:middle;}

@thedude · 13.01.2017, 17:57 **[ТС]**

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

Он плавающий! Что означает строка?

Что то вы меня запутали.
Элементы выстраиваются по базовой линии. У строчно-блочного элемента базовая линия равняется базовой линии последней строки. Применяя vertical-align:middle к inline-block, половина его высоты ставится по середине базовой линии родителя + половина высоты буквы x. Строчка то и означает, что inline-block-и должны выровняться по центру относительно базовой линии родителя. А буква X подтягивается под самый высокий элемент в строке.

Добавлено через 5 минут
Отрицательный маргин тащит базовую линию за собой до верха, смещая при этом и элемент Х. Затем логичнее было предположить, что после применения вертикального выравнивания inline-block совсем немного спуститься вниз, относительно базовой линии, где висит буква Х. Но вместо этого он перескакивает вверх и немного смещает букву Х. И теперь визуально inline-block нихрена не выровнен по центру относительно родительской линии.

@Fedor92 · 13.01.2017, 18:03

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

Что то вы меня запутали.

Вы сами себя запутали...

К букве Х не применяется стиль vertical-align:middle, он применяется только к дивам внутри родительского элемента, поэтому буква X выравнивается по верхней границе родительского элемента...

@thedude · 13.01.2017, 18:48 **[ТС]**

Я в курсе, кто к букве Х не применяется vertical-align. Буква должна остаться на месте, как и родительская базовая линия собственно. Но почему блок выскакивает наружу? Базовая линия родителя осталась под буквой Х, после маргина

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

inline-block нихрена не выровнен по центру относительно родительской линии

. Ведь базовая линия не смещается к верху буквы Х, а визуально выглядет будто так

@Fedor92 · 13.01.2017, 18:55

thedude, а Вы учитываете где оказалась базовая линия после анимации?

@thedude · 13.01.2017, 18:58 **[ТС]**

Да! Она поднялась вместе с элементами вверх

Я Что то упустил?

@Fedor92 · 13.01.2017, 19:10

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

Я Что то упустил?

А теперь разберём... Когда Вы нажали первый чексбокс, для всех элементов сработала анимация... X и дивы поднялись вверх... Когда выделили второй к вложенным дивам применился стиль vertical-align:middle, X - остался на месте, поскольку он не находится в диве... Логично?

@thedude · 13.01.2017, 19:25 **[ТС]**

Мы на месте топчемся) Это все логично. При втором чекбоксе inline-block-и не должны убегать от базовой линии вверх, словно бешеные) Они должны всего лишь немного сместиться вниз, чтобы середина высоты блоков сместилась к базовой линии (+ половина высота буквы x

@Mailo · 13.01.2017, 22:13

Я опять может немного не в тему влезу, но у меня тоже зачастую возникают проблемы с вертикальным выравниванием. Как я понял, вертикальное выравнивание это вообще табличная тема и для её активации нужно, что бы родительский блок был display:table, а дочерний (в том, котором вы хотите выровнить элемент) display:table-cell. Но работает эта техника, не со всеми тегами, к примеру с картинками (img) это не работает, приходится впихивать их в span, что бы всё заработало, хотя это оба инлайновые теги.

@thedude · 13.01.2017, 23:38 **[ТС]**

Вы не в тему) Вообще суть поста не в этом. Я просто хотел узнать почему в таком случае выравнивание ведет себя не как подобает. Без анимации нажмите второй чекед (выравнивание, какое оно всегда бывает), а теперь после анимации (ведет себя по дурному, то ли баг то ли что...)
P.S. По вертикали я умею центрировать

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@thedude 36 / 37 / 23 Регистрация: 31.05.2014 Сообщений: 131
	13.01.2017, 15:31 [ТС]
	Что никто не знает почему так происходит? 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	13.01.2017, 18:55
	thedude, а Вы учитываете где оказалась базовая линия после анимации? 0

@thedude 36 / 37 / 23 Регистрация: 31.05.2014 Сообщений: 131
	13.01.2017, 18:58 [ТС]
	Да! Она поднялась вместе с элементами вверх Я Что то упустил? Миниатюры 0

@thedude 36 / 37 / 23 Регистрация: 31.05.2014 Сообщений: 131
	13.01.2017, 19:25 [ТС]
	Мы на месте топчемся) Это все логично. При втором чекбоксе inline-block-и не должны убегать от базовой линии вверх, словно бешеные) Они должны всего лишь немного сместиться вниз, чтобы середина высоты блоков сместилась к базовой линии (+ половина высота буквы x Миниатюры 0

@Mailo 178 / 226 / 31 Регистрация: 18.02.2010 Сообщений: 2,313
	13.01.2017, 22:13
	Я опять может немного не в тему влезу, но у меня тоже зачастую возникают проблемы с вертикальным выравниванием. Как я понял, вертикальное выравнивание это вообще табличная тема и для её активации нужно, что бы родительский блок был display:table, а дочерний (в том, котором вы хотите выровнить элемент) display:table-cell. Но работает эта техника, не со всеми тегами, к примеру с картинками (img) это не работает, приходится впихивать их в span, что бы всё заработало, хотя это оба инлайновые теги. 0

@thedude 36 / 37 / 23 Регистрация: 31.05.2014 Сообщений: 131
	13.01.2017, 23:38 [ТС]
	Вы не в тему) Вообще суть поста не в этом. Я просто хотел узнать почему в таком случае выравнивание ведет себя не как подобает. Без анимации нажмите второй чекед (выравнивание, какое оно всегда бывает), а теперь после анимации (ведет себя по дурному, то ли баг то ли что...) P.S. По вертикали я умею центрировать 0