Этот юмор слишком профессиональный для меня.
11.10.2016, 15:59
Ты был прав. Внизу вроде пояснили, но я все равно почти нихера не понял
Я объясню для обывателей.
Казалось бы, есть CSS - штука, в которой описывают как будет выглядеть веб страница. И логично, что в 2016 году такая штука должна уметь.. ну хотя бы выравнивать элементы по горизонтали и вертикали относительно места, в котором она находится.
Но оно не умеет. По крайней мере напрямую, вот так написав одно правило. А vertical-align из комикса - выравнивает блок по вертикали, но не относительно места где он находится, а относительно других блоков, стоящих с ним в одну линию. Я взорву вам еще мозг - если блок это ячейка таблицы, то тогда она не выравнивает себя относительно соседей, а выравнивает свое содержимое по центру. Вот от этго диссонанса, костылей и ебли и разочаровываются в CSS и в профессии верстальщика в целом.
Ну и собственно, чтобы выровнять содержимое по вертикали, есть минимум 5 костыльных способов, один охуительнее другого, и каждый совершенно не очевиден.
Казалось бы, есть CSS - штука, в которой описывают как будет выглядеть веб страница. И логично, что в 2016 году такая штука должна уметь.. ну хотя бы выравнивать элементы по горизонтали и вертикали относительно места, в котором она находится.
Но оно не умеет. По крайней мере напрямую, вот так написав одно правило. А vertical-align из комикса - выравнивает блок по вертикали, но не относительно места где он находится, а относительно других блоков, стоящих с ним в одну линию. Я взорву вам еще мозг - если блок это ячейка таблицы, то тогда она не выравнивает себя относительно соседей, а выравнивает свое содержимое по центру. Вот от этго диссонанса, костылей и ебли и разочаровываются в CSS и в профессии верстальщика в целом.
Ну и собственно, чтобы выровнять содержимое по вертикали, есть минимум 5 костыльных способов, один охуительнее другого, и каждый совершенно не очевиден.
Воу.. Теперь я понял, спасибо
Стандарты и браузеры пишут люди, очень далекие от простых бизнесов, обывателей, журналистов и художников. Они воспринимают веб как нечто газетное - где не должно быть абсолютно расположенных элементов. Все элементы с их точки зрения должны идти один за других, в потоке. Ну и веб с их точки зрения это не игрушка, где можно играть с шрифтами и центрировать блоки.
Экий пиздёж. Это простые бизнесы далеки от стандартов и браузеров. Зато пофилософствовать горазды.
Еще один суицид :D
Ниже дважды говорили про flex, и дважды ответили что эта хуета не держит в IE9-10-11, а polyfill на js еще и требует прописывать flex атрибуты в html, Карл. Так что ты все равно будешь верстать на display table и table-cell, если хочешь дать заказчику семантически чистый html и кроссбраузерный css, и чтобы без полифилов под IE11, ибо это тоже современный браузер, хоть и говно. Ну а иначе ты просто кодер-верстак, который верстает хуяк хуяк и в продакшн, обмазанный кучей полифилов, data-font-size в атрибутах и прочих стилях прямо в html.
Ниже дважды говорили про flex, и дважды ответили что эта хуета не держит в IE9-10-11, а polyfill на js еще и требует прописывать flex атрибуты в html, Карл. Так что ты все равно будешь верстать на display table и table-cell, если хочешь дать заказчику семантически чистый html и кроссбраузерный css, и чтобы без полифилов под IE11, ибо это тоже современный браузер, хоть и говно. Ну а иначе ты просто кодер-верстак, который верстает хуяк хуяк и в продакшн, обмазанный кучей полифилов, data-font-size в атрибутах и прочих стилях прямо в html.
На 11 IE flex работает. Иди учи матчасть. Я в рот ебал и table и talbe-cell, и таких вот знатоков.
Вот тебе страница сделанная мной полностью на флексах. В ней нет ни одного inline, inline-block, table и прочей древней хуйты. Полифилов нет. Inline тегов нет. Ты точно за это деньги получаешь? Мне кажется зря.
http://prntscr.com/csyoa1 Вот тебе скрин рядом с 11.
Реального трафика IE&EDGE в проекте
Вот тебе страница сделанная мной полностью на флексах. В ней нет ни одного inline, inline-block, table и прочей древней хуйты. Полифилов нет. Inline тегов нет. Ты точно за это деньги получаешь? Мне кажется зря.
http://prntscr.com/csyoa1 Вот тебе скрин рядом с 11.
Реального трафика IE&EDGE в проекте
А относительно чего мы его выровняем? Да и нет у нас по сути лишних элементов. Если речь о выравнивании по высоте, то это означает что высота внешнего (родительского блока, рамки) уже задана, то есть не зависит от контента.
Вот вам несколько способов, вечер интересных историй начался, поехали:
1) Попробуем сделать line-height во всю высоту блока, и таки поставим внутри vertical-align: middle. А блок внутри сделаем inline-block.
line-height - ширина строки с буквами, vertical-align - выравнивание по середине строки с буквами, inline-block говори вести себя элементу как слову или букве, то есть быть в линию.
2) Самый здравый. display: absolute; top: 50%; transform: translateY(-50%);
позиционирование - абсолютное. В этом случае внешний блок не может брать размеры от контента (высота и так не от контента, помните?) - но, прощай автоматическая ширина, теперь мы должны задавать ширину родителю явно. top 50% - сдвигает контент до середины, выглядит так, что первая половина квадрата пустая, а во второй половине наш контент, начинающийся ровно от середины. Не совсем то что мы хотели, но на то он и top, чтобы работать относительно размера родителя. Дальше transform translateY - вот эта магия уже как раз двигает относительно своих размеров контента, и мы сдвигаем его на половину вверх от самого себя. И вуаля, все выглядит как надо.
3) Родителю - display: table-cell. Хардкор, теперь родительский блок как будто бы ячейка таблицы. Этому же родителю добавляем vertical-align: middle. И он выравнивает контент по вертикали, да и еще ширину может сам от контента брать. Мой любимый способ после способа 2.
4) Популярный способ в нулевых. Надо добавить еще один блок вокруг всего нашего блока. У нас будет Блок A, в нем блок B, а в нем контент C. Блоку A говорим top 50%, а контенту говорим top: -50%. Причем высоту надо задать A, а блок B должен взять высоту относительно контента, тогда top: -50% внутри него сработает аля transform. Ну понимаете, когда transform еще не было..
5) Суперхак. контенту делаем position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto;
WAT говорит браузер, ты хочешь чтобы элемент был впритык ко всем краям, но говоришь что margin (отступы) должны быть автоматическими.. пожалуй я сам рассчитаю ему одинаковые отступы со всех сторон, чтобы блок был по центру. Бинго, браузер, я тебя наебал. Опять же, absolute, внешний блок не может взять ширину от контента, и ее надо ставить самому.
Это способы, когда мы ничего не знаем заранее о высоте контента (читай, она может быть любая). Если же высота контента заранее известна, количество способов резко вырастает, а их оригинальность коррелирует с количеством. В этом случае вход могут пойти заранее рассчитанные координаты left и top, игры с отрицательными отступами margin (а подвинем мы контент на margin: -50px, он ведь 100px, по центру и встанет) и т.д. и т.п.
Спасибо за внимание, уебищные представления окончены. Надеюсь вы пожалели время и средства.
Вот вам несколько способов, вечер интересных историй начался, поехали:
1) Попробуем сделать line-height во всю высоту блока, и таки поставим внутри vertical-align: middle. А блок внутри сделаем inline-block.
line-height - ширина строки с буквами, vertical-align - выравнивание по середине строки с буквами, inline-block говори вести себя элементу как слову или букве, то есть быть в линию.
2) Самый здравый. display: absolute; top: 50%; transform: translateY(-50%);
позиционирование - абсолютное. В этом случае внешний блок не может брать размеры от контента (высота и так не от контента, помните?) - но, прощай автоматическая ширина, теперь мы должны задавать ширину родителю явно. top 50% - сдвигает контент до середины, выглядит так, что первая половина квадрата пустая, а во второй половине наш контент, начинающийся ровно от середины. Не совсем то что мы хотели, но на то он и top, чтобы работать относительно размера родителя. Дальше transform translateY - вот эта магия уже как раз двигает относительно своих размеров контента, и мы сдвигаем его на половину вверх от самого себя. И вуаля, все выглядит как надо.
3) Родителю - display: table-cell. Хардкор, теперь родительский блок как будто бы ячейка таблицы. Этому же родителю добавляем vertical-align: middle. И он выравнивает контент по вертикали, да и еще ширину может сам от контента брать. Мой любимый способ после способа 2.
4) Популярный способ в нулевых. Надо добавить еще один блок вокруг всего нашего блока. У нас будет Блок A, в нем блок B, а в нем контент C. Блоку A говорим top 50%, а контенту говорим top: -50%. Причем высоту надо задать A, а блок B должен взять высоту относительно контента, тогда top: -50% внутри него сработает аля transform. Ну понимаете, когда transform еще не было..
5) Суперхак. контенту делаем position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto;
WAT говорит браузер, ты хочешь чтобы элемент был впритык ко всем краям, но говоришь что margin (отступы) должны быть автоматическими.. пожалуй я сам рассчитаю ему одинаковые отступы со всех сторон, чтобы блок был по центру. Бинго, браузер, я тебя наебал. Опять же, absolute, внешний блок не может взять ширину от контента, и ее надо ставить самому.
Это способы, когда мы ничего не знаем заранее о высоте контента (читай, она может быть любая). Если же высота контента заранее известна, количество способов резко вырастает, а их оригинальность коррелирует с количеством. В этом случае вход могут пойти заранее рассчитанные координаты left и top, игры с отрицательными отступами margin (а подвинем мы контент на margin: -50px, он ведь 100px, по центру и встанет) и т.д. и т.п.
Спасибо за внимание, уебищные представления окончены. Надеюсь вы пожалели время и средства.
внутри DIV не работает вертикальное выравнивание. Это CSS свойство работает только в табличной верстке
Это свойство работает только на табличных и строчных элементах.
С параграфом внутри дива без шаманства с display:table-cell работать не будет.
С параграфом внутри дива без шаманства с display:table-cell работать не будет.
в css нельзя взять и одним правилом сделать выравнивание по вертикали.
правило vertical-align слегка не очевидно выравнивает и относительно других блоков в том же контейнере, а не относительно самого контейнера (распространенная ошибка 99% процента новичков)
правило vertical-align слегка не очевидно выравнивает и относительно других блоков в том же контейнере, а не относительно самого контейнера (распространенная ошибка 99% процента новичков)
Шёл 2016й год, российские версталы всё ещё не знали про flex.
Который нихуя не работает в IE9-10-11
Но есть js polyfill. Который, ебать, требует указания flex атрибутов в html. Который блять, должен быть семантически чистым и не знать ничего про flex и css.
Шел 2016 год, верстальщики так и не научились верстать кроссбраузерно через display: table, table-cell, translateY(-50%) c position absolute и vertical-align: middle внутри table.
Но есть js polyfill. Который, ебать, требует указания flex атрибутов в html. Который блять, должен быть семантически чистым и не знать ничего про flex и css.
Шел 2016 год, верстальщики так и не научились верстать кроссбраузерно через display: table, table-cell, translateY(-50%) c position absolute и vertical-align: middle внутри table.
>IE9-10-11
Говна не держим, равнение на Edge & Safari.
Говна не держим, равнение на Edge & Safari.
Нет блять) Новичку дали совет, который выглядит правильно (vertical-align - ну должно же по вертикали выровнять, ну), и пока новичок не открыл браузер, быстро свалили. А оно нихуя вообще так не работает и новичок остался с тем чем был, и еще и ощущением что его наебал и коллега, и сам браузер.
Два или четыре?
Когда тебе нужен абстрактный класс.
А может все таки интерфейс? Или ты, прости господи, не знаешь чем интерфейс отличается от абстрактного класса?
Блин, сейчас как раз сижу с этой херней порюсь. Не с div конкретно, а с версткой в целом.
Вёрстка - это просто и приятно, только смазки не жалей.
Если уже есть fallback с table-cell, который работает идентично (а верстать не идентично с ИЕ11 для заказчика было бы странно), то нахуй тогда нужен flex?
Даже не знаю, тут нет правильного ответа или просто кто-то ненавидящий вёрстку по комментам прошелся?
Ты за висту ответишь, я с этой крошкой уже 8 лет ебусь
Всем, кто недоумевают "за что заминусовали" - установите скрипт для GraceMonkey, чтобы не смущало: http://joyreactor.cc/post/2526114
А подсказка какая была- то?
В FF одна и та же страница может через раз отображаться четко и куда-нибудь съезжать
А потом он открыл в опере 12...
css сплошной хак, я тут под винду на wpf писал так там вёрстка в разы проще, конечно там других проблем достаточно, но всё равно не понятно почему нельзя взять и сделать новую версию так чтоб было хорошо. выкинуть лишние элементы, а оставшиеся долепить до нормального состояния
Обратная совместимость. Веб это тебе не приложение обновить. Браузер обязан корректно отображать сайты, написанные на css2 и так далее (2000-ые). Ну и строго говоря, браузеры могли по сговору все исправить, и сделать заебись, но они ничего не решают, решает W3C комитет по стандартизации, который обкурен по самые гланды.
