Понадобилось вертикально выровнять текст, стал гуглить, оказалось что это not so easy, и есть даже специальный сайт призванный людям в этом помочь. Вообще я вебом особо никогда не занимался, но как так то? Почему то что еще в 90-е делалось в delphi одним кликом мышки(в плане интерфейса), тут по этим "сложным" вопросам обсуждение на 100 страниц?

Здравствуйте, dmitritch, Вы писали:

D>Понадобилось вертикально выровнять текст, стал гуглить, оказалось что это not so easy, и есть даже специальный сайт призванный людям в этом помочь. Вообще я вебом особо никогда не занимался, но как так то? Почему то что еще в 90-е делалось в delphi одним кликом мышки(в плане интерфейса), тут по этим "сложным" вопросам обсуждение на 100 страниц?

Потому, что HTML предназначен для вёрстки текста и картинок. Текст верстается слева направо и сверху вниз. Где ты видел в книгах выравнивание по вертикали, как ты вообще это представляешь?

Судя по сравнению с Delphi ты пытаешься использовать HTML для создания интерфейса приложения. Для этого в Web есть стандарт Grid.

А вообще в Delphi layout был донельзя примитивным. Если так уж хочется, такое можно на JavaScript накалякать за день.

Здравствуйте, vsb, Вы писали:

vsb>Потому, что HTML предназначен для вёрстки текста и картинок. Текст верстается слева направо и сверху вниз.

Еще один иксперд

vsb>Где ты видел в книгах выравнивание по вертикали, как ты вообще это представляешь?

Открой любую книгу и посмотри.

Здравствуйте, MTD, Вы писали:

MTD>Открой любую книгу и посмотри.
MTD>Image: basic-title.jpg
Да, переносов строки натыкали

Здравствуйте, MTD, Вы писали:

MTD>Открой любую книгу и посмотри.

Ну вот, даже в никгах косячное выравнивание. Оно же не по середине.

Здравствуйте, rFLY, Вы писали:

FLY>Ну вот, даже в никгах косячное выравнивание. Оно же не по середине.

Ты про вертикальное или горизонтальное? Вертикальное — это дизайнер так видит, а горизонтальное — допуск под переплет.

Здравствуйте, dmitritch, Вы писали:

D>есть даже специальный сайт
Какой-то он косячный, смотрите что для IE6 он нагенирил

<div style="display:table;">
  <div style="display:table-cell;vertical-align:middle;">
    <div style="margin-left:auto;margin-right:auto;"></div>
  </div>
</div>

В нем же display:table-cell не поддерживается и отсутпы со значение ауто не рулят выравниванием.

Здравствуйте, MTD, Вы писали:

MTD>Ты про вертикальное или горизонтальное? Вертикальное — это дизайнер так видит, а горизонтальное — допуск под переплет.
Кузьмич, это же шутка была (с)

Здравствуйте, rFLY, Вы писали:

FLY>Кузьмич, это же шутка была (с)

Туплю

Здравствуйте, MTD, Вы писали:

vsb>>Где ты видел в книгах выравнивание по вертикали, как ты вообще это представляешь?

MTD>Открой любую книгу и посмотри.

MTD>Image: basic-title.jpg

ыксперд не отличает горизонталь и вертикаль?

Здравствуйте, vsb, Вы писали:

vsb>ыксперд не отличает горизонталь и вертикаль?

Да кто тебя знает, что ты там не различаешь

Вот, почитай на досуге, чтобы не нести ахинею в следующий раз:



https://medium.com/miraiartstudio/типографика-и-верстка-книг-часть-2-f436f44d0dc6

Здравствуйте, MTD, Вы писали:

vsb>>ыксперд не отличает горизонталь и вертикаль?

MTD>Да кто тебя знает, что ты там не различаешь

MTD>Вот, почитай на досуге, чтобы не нести ахинею в следующий раз:

MTD>Image: 1*gQizQ9Z4B5VTPOOsK9dVTw.jpeg

MTD>https://medium.com/miraiartstudio/типографика-и-верстка-книг-часть-2-f436f44d0dc6

Так и запишем, горизонталь от вертикали не отличает, паддинги от выравнивания тоже.

Здравствуйте, vsb, Вы писали:

vsb>Так и запишем, горизонталь от вертикали не отличает, паддинги от выравнивания тоже.

Я уже понял, что у тебя все плохо, но чтобы настолько Умный человек бы уже по ссылке прошел и перестал нести ахинею, но ты видимо решил интеллект продемонстрировать полностью. Я тебе уже картинку привел, вот тебе ее пояснение:

Вертикальная, длинная иллюстрация занимает всю полосу набора в высоту, и, естественно, ее нужно ставить по центру полосы набора (рис.6, слева). При этом меньшая иллюстрация (рис. 6, справа) располагается так, чтобы соотношение между расстояниями от иллюстрации до верхнего обреза и до нижнего обреза составляло 1:2 или 3:5.

Здравствуйте, dmitritch, Вы писали:

D>Понадобилось вертикально выровнять текст, стал гуглить, оказалось что это not so easy ... но как так то?

И не только выравнивание! Практически любая тривиальщина в HTML решается через анус и кучу маразматических моделей, никакая из которых не является удобной.
А вся проблема в том, что HTML изобретался во времена примитивнейших идей, ограниченными людьми и безо всякой оглядки на перспективы развития (его брат-урод TeX до сих пор используется мазохистами-научработниками). Что такое "форматирование"? Это, ни много, ни мало, задатки ИЗДАТЕЛЬСТВА! Да-да, высокоточная полиграфия, выключки, интерлиньяж и т.п. Об этом никто не думал, ибо типичная америкозская модель решения проблем — придумывать гвозди от северной стены. Как только HTML смог делать жирный шрифт с картинками, все радостно подхватили это убожество и понеслась классическая постройка телебашни на деревянном срубе — цвета, размер, списки, таблицы... засрав язык, до них наконец дошла идея стилей, но общее непонимание HTML как средства вёрстки так и осталось, причём до сих пор — наспех прикрученные сбоку "автоколонки" никак не решают концептуального несоответствия идеи "шаблон/разметка+текст" и бестолкового нагромождения тегов, называемого "языком гипертекста".
Что забавно, в чисто программерской идее — WPF, была воплощена (почти) идеальная модель разметки элементов! DockPanel, StackPanel, etc — превосходные и гибкие элементы, позволяющие практически любое размещение и выравнивание. Что нехватает WPF для покорения паблишинга, так это отделение текста от разметки + отделение форматирующих тегов от разметочных.

Извините, что так много букв, но самого бесят эти старые маразматики, штампующие свои убогие "стандарты" для непойми кого. Тыкни в любого дизайнера и 100% найдётся задача, с которой он провозится час, хотя на WPF всё делается за 5 минут. HTML — на мыло!

Здравствуйте, vsb, Вы писали:

vsb>паддинги от выравнивания тоже.

ИМО, тут кое-кто не отличает выравнивание от центрирования, и это не MTD.

Здравствуйте, Kolesiki, Вы писали:

K>Да-да, высокоточная полиграфия, выключки, интерлиньяж и т.п.

Там и без HTML долгое время все плохо было, только PS/PDF, только хардкор (для любителей полного хардкора еще CT+LV), больше ничего "переносимого" не было. Ну разве что в QuarkXPress можно было в 99% случаев надеяться, что верстка не расползется на другом принтере, остальной издательский софт этого на практике не гарантировал.

Здравствуйте, Ops, Вы писали:

Ops>ИМО, тут кое-кто не отличает выравнивание от центрирования, и это не MTD.
ТС, судя по ссылке на генератор, имел ввиду именно центрирование, хотя по тексту пишет о выравнивании

HOW TO
CENTER
IN CSS

Здравствуйте, rFLY, Вы писали:

FLY>ТС, судя по ссылке на генератор, имел ввиду именно центрирование, хотя по тексту пишет о выравнивании

Так для вложенных контейнеров с определенными пропорциями — это именно способ добиться выравнивания. Думаю, тут проблемы перевода взаимопонимания.

Здравствуйте, dmitritch, Вы писали:

D>Понадобилось вертикально выровнять текст, стал гуглить, ...обсуждение на 100 страниц?

Полагаю, что так называемый flexbox вам поможет.

Здравствуйте, dmitritch, Вы писали:

вот простенький способ (вместо <em> можешь использовать любой другой неиспользуемый тэг, но вся суть в том, что он растягивается на высоту контейнера и все элементы выравниваются по центру):

<html>
<style>
.container {
    width:200px;
    height:200px;
    text-align: center; /* центрируем горизонтально */
    border:solid 1px red;
}
.container * {
    display: inline-block;
    vertical-align: middle; /* а тут вертикально*/
}
.container em {
    height: 100%;
}
</style>
<body>
    <div class="container"><div>Понадобилось<br/>вертикально<br/>выровнять текст</div><em></em></div>
    <div class="container"><p>Понадобилось вертикально выровнять текст</p><em></em></div>
</body>
</html>