Выравнивание по вертикали

@GoldenId · Регистрация: 11.11.2010

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

Затратив 13 миллиардов лет на поиски способа ~~налить в пустую чашку чай из чайника, в котором есть чай~~ выровнять строчный элемент по центру по вертикали в блочном:

, защитив по теме три докторские и 28 кандидатских диссертаций, у меня остался вопрос:
Как выровнять [del] текст по вертикали:

HTML5
1
2
3
4
5
<div>
    <span vertical-align="middle">text</span>
    <iframe class="google-audio" src="https://drive.google.com/file/d/1imYlKMT6BbgtAg9-QTfdB5oLrMIo60YX/preview"></iframe>
    <span vertical-align="middle">text</span>
</div>

?

[del]

Qwerty_Wasd · 07.04.2018, 20:41

GoldenId, к примеру - песочница

HTML5
1
2
3
<div class="main"><span class="wrap-it" vertical-align="middle">text</span>
  <iframe class="google-audio wrap-it" src="https://drive.google.com/file/d/1imYlKMT6BbgtAg9-QTfdB5oLrMIo60YX/preview"></iframe><span class="wrap-it" vertical-align="middle">text</span>
</div>

CSS
1
2
.main{display:table}
.wrap-it{display:table-cell;vertical-align:middle}

@GoldenId · 07.04.2018, 21:06 **[ТС]**

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

к примеру - песочница

Qwerty_Wasd, найдено эмпирическим путём?

Qwerty_Wasd · 07.04.2018, 21:11

GoldenId,

, нет. Варианты на этом не кончаются.

И на разметку бегло глянул - даже не заметил.

@GoldenId · 07.04.2018, 21:14 **[ТС]**

Qwerty_Wasd, спасибо, друк! Ты настоящий Братец Кролик!

Qwerty_Wasd · 07.04.2018, 21:16

GoldenId, удачи Братец Лис

@GoldenId · 08.04.2018, 21:56 **[ТС]**

Qwerty_Wasd, сам ты лис

Qwerty_Wasd · 08.04.2018, 22:37

Не по теме:

GoldenId, ну ё-мое. Я то думал Вы также этот мультик в детстве смотрели. А Вы оказывается просто словами кидались :-/

@golosalex · 09.04.2018, 05:37

отобразить элемент как ячейку таблицы единственный универсальный способ... все остальные работают корявенько, надо знать высоту содержимого и с цифрами возиться плюс верска поехать может если резиновая... или я не совсем в теме шарю?

@GoldenId · 12.04.2018, 00:02 **[ТС]**

Не по теме:

Qwerty_Wasd, основания почему Братец Лис?

Добавлено через 1 минуту
golosalex, благодарю. Применил табличную вёрстку по другой причине.

Новые блоги и статьи Все статьи Все блоги /
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом

Qwerty_Wasd 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	07.04.2018, 21:11
	GoldenId, , нет. Варианты на этом не кончаются. И на разметку бегло глянул - даже не заметил. 0

@GoldenId 142 / 143 / 64 Регистрация: 11.11.2010 Сообщений: 877 Записей в блоге: 10
	07.04.2018, 21:14 [ТС]
	Qwerty_Wasd, спасибо, друк! Ты настоящий Братец Кролик! 0

Qwerty_Wasd 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	07.04.2018, 21:16
	GoldenId, удачи Братец Лис 0

@GoldenId 142 / 143 / 64 Регистрация: 11.11.2010 Сообщений: 877 Записей в блоге: 10
	08.04.2018, 21:56 [ТС]
	Qwerty_Wasd, сам ты лис 0

Qwerty_Wasd
	08.04.2018, 22:37
	Не по теме: GoldenId, ну ё-мое. Я то думал Вы также этот мультик в детстве смотрели. А Вы оказывается просто словами кидались :-/ 0

@golosalex 151 / 135 / 29 Регистрация: 02.07.2013 Сообщений: 967
	09.04.2018, 05:37
	отобразить элемент как ячейку таблицы единственный универсальный способ... все остальные работают корявенько, надо знать высоту содержимого и с цифрами возиться плюс верска поехать может если резиновая... или я не совсем в теме шарю? 1

@GoldenId 142 / 143 / 64 Регистрация: 11.11.2010 Сообщений: 877 Записей в блоге: 10
	12.04.2018, 00:02 [ТС]
	Не по теме: Qwerty_Wasd, основания почему Братец Лис? Добавлено через 1 минуту golosalex, благодарю. Применил табличную вёрстку по другой причине. 0