html — Выравнивание нескольких блоков по вертикали flexbox
Есть контейнер высотою 100vh, в нем есть верхняя навигация, и один блок по середине. Не могу найти нужного свойство для такого.
<header> <nav>Top</nav> <div>Middle</div> </header>
- html
- css
- flexbox
align-items: center
:
header { display: flex; flex-flow:column nowrap; align-items: center; /* justify-content: center; */ background: #ccc; } nav { background: #000; color:#fff; display: block; width: 100%; text-align: center; } div { background: yellow; display: block; width: 100%; text-align: center; }
<header> <nav>Top</nav> <div>Middle</div> </header>
Или так, если второй блок по вертикали выравнять:
header { display: flex; flex-flow:column nowrap; align-items: center; /* justify-content: center; */ background: #ccc; } nav { background: #000; color:#fff; display: block; width: 100%; text-align: center; } div { background: yellow; display: block; width: 100%; text-align: center; margin:auto auto; }
<header> <nav>Top</nav> <div>Middle</div> </header>
Вариант с flex-direction:row
:
header { display: flex; flex-flow: row wrap; justify-content: center; align-items: flex-start; background: #ccc; } nav { background: #000; color: #fff; display: block; width: 100%; text-align: center; } div { background: yellow; display: block; width: 100%; text-align: center; align-self: baseline; }
<header> <nav>Top</nav> <div>Middle</div> </header>
Зарегистрируйтесь или войдите
Регистрация через Google Регистрация через Facebook Регистрация через почтуОтправить без регистрации
ПочтаНеобходима, но никому не показывается
Отправить без регистрации
ПочтаНеобходима, но никому не показывается
By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.
Как выровнять текст по высоте
Все способы вертикального выравнивания в CSS
Я думаю, многие из вас, кому приходилось заниматься версткой, сталкивались с необходимостью выравнивать элементы по вертикали и знают, какие сложности возникают при выравнивании элемента по центру.
Да, для вертикального выравнивания в CSS есть специальное свойство vertical-align с множеством значений. Однако на практике оно работает совсем не так, как ожидается. Давайте попробуем в этом разобраться.
Сравним следующие подходы. Выравнивание с помощью:
- таблицы,
- отступов,
- line-height ,
- растягивания,
- отрицательного margin ,
- transform ,
- псевдоэлемента,
- flexbox .
Есть два элемента div , при этом один из них вложен в другой. Дадим им соответствующие классы − outer и inner .
Задача состоит в том, чтобы выровнять внутренний элемент по центру внешнего элемента.
Для начала рассмотрим случай, когда размеры внешнего и внутреннего блока известны. Добавим внутреннему элементу правило display: inline-block , а внешнему − text-align: center и vertical-align: middle .
Нпомню, что выравнивание применяется только к элементам, которые имеют режим отображения inline или inline-block .
Зададим блокам размеры, а также фоновые цвета, чтобы видеть их границы.
После применения стилей мы увидим, что внутренний блок выровнялся по горизонтали, а по вертикали нет:
http://jsfiddle.net/c1bgfffq/
Почему так произошло? Дело в том, что свойство vertical-align влияет на выравнивание самого элемента, а не его содержимого (кроме случаев, когда оно применяется к ячейкам таблицы). Поэтому применение данного свойства к внешнему элементу ничего не дало. Более того, применение этого свойства к внутреннему элементу также ничего не даст, поскольку строчные блоки ( inline-block ) выравниваются по вертикали относительно соседних блоков, а в нашем случае у нас один строчный блок.
Для решения данной проблемы существует несколько техник. Ниже подробнее рассмотрим каждую из них.
Выравнивание с помощью таблицы
Первое приходящее на ум решение − заменить внешний блок таблицей из одной ячейки. В этом случае выравнивание будет применяться к содержимому ячейки, то есть к внутреннему блоку.
Очевидный минус данного решения – с точки зрения семантики неправильно применять таблицы для выравнивания. Второй минус в том, что для создания таблицы требуется добавить еще один элемент вокруг внешнего блока.
Первый минус можно частично убрать, заменив теги table и td на div и задав табличный режим отображения в CSS.
Тем не менее внешний блок все равно останется таблицей со всеми вытекающими из этого последствиями.
Выравнивание с помощью отступов
Если высоты внутреннего и внешнего блока известны, то выравнивание можно задать с помощью вертикальных отступов у внутреннего блока, используя формулу: (Houter – Hinner) / 2.
Минус решения — оно применимо лишь в ограниченном числе случаев, когда известны высоты обоих блоков.
Выравнивание с помощью line-height
Если известно, что внутренний блок должен занимать не более одной строки текста, то можно воспользоваться свойством line-height и задать его равным высоте внешнего блока. Поскольку контент внутреннего блока не должен переноситься на вторую строку, рекомендуется также добавить правила white-space: nowrap и overflow: hidden .
Также данную технику можно применять и для выравнивания многострочного текста, если для внутреннего блока переопределить значение line-height , а также добавить правила display: inline-block и vertical-align: middle .
Минус данного способа заключается в том, что должна быть известна высота внешнего блока.
Выравнивание с помощью «растягивания»
Данный способ можно применять, когда высота внешнего блока неизвестна, но известна высота внутреннего.
Для этого нужно:
- задать внешнему блоку относительное позиционирование, а внутреннему − абсолютное;
- добавить внутреннему блоку правила top: 0 и bottom: 0 , в результате чего он растянется на всю высоту внешнего блока;
- установить значение auto для вертикальных отступов внутреннего блока.
Суть этой техники заключается в том, что задание высоты для растянутого и абсолютно спозиционированного блока заставляет браузер вычислять вертикальные отступы в равном соотношении, если их значение установлено в auto .
Минус данного способа — должна быть известна высота внутреннего блока.
Выравнивание с помощью отрицательного margin-top
Этот способ получил широкую известность и применяется очень часто. Как и предыдущий, он применяется, когда высота внешнего блока неизвестна, но известна высота внутреннего.
Нужно задать внешнему блоку относительное позиционирование, а внутреннему − абсолютное. Затем необходимо сдвинуть внутренний блок вниз на половину высоты внешнего блока top: 50% и поднять вверх на половину собственной высоты margin-top : -Hinner / 2.
Минус данного способа — должна быть известна высота внутреннего блока.
Выравнивание с помощью transform
Данный способ похож на предыдущий, но он может быть применен, когда высота внутреннего блока неизвестна. В этом случае вместо задания отрицательного отступа в пикселях можно воспользоваться свойством transform и поднять внутренний блок вверх с помощью функции translateY и значения -50% .
Почему в предыдущем способе нельзя было задать значение в процентах? Так как процентные значения свойства margin вычисляются относительно родительского элемента, значение в 50% равнялось бы половине высоты внешнего блока, а нам нужно было поднять внутренний блок на половину его собственной высоты. Для этого как раз подходит свойство transform .
Минус данного способа в ограниченной поддержке свойства transform старыми версиями браузера IE.
Выравнивание с помощью псевдоэлемента
Это наиболее универсальный способ, который может применяться, когда неизвестны высоты обоих блоков.
Суть способа в добавлении внутри внешнего блока строчного блока inline-block высотой в 100% и задания ему вертикального выравнивания. В этом случае высота добавленного блока будет равна высоте внешнего блока. Внутренний блок выровняется по вертикали относительно добавленного, а значит, и внешнего блока.
Чтобы не нарушать семантику, строчный блок рекомендуется добавить с помощью псевдоэлемента before или after .
Минус данного способа — он не может быть применен, если внутренний блок имеет абсолютное позиционирование.
Выравнивание с помощью Flexbox
Самый современный способ вертикального выравнивания это использовать Flexible Box Layout (в народе известен как Flexbox ). Данный модуль позволяет гибко управлять позиционированием элементов на странице, располагая их практически как угодно. Выравнивание по центру для Flexbox − очень простая задача.
Внешнему блоку необходимо задать display: flex , а внутреннему − margin: auto . И это все! Красиво, правда?
Минус данного способа − Flexbox поддерживается только современными браузерами.
Что такое vertical-align?
В CSS есть свойство vertical-align. Когда вы только узнаете о нем, то оно покажется довольно запутанным. Поэтому предлагаю вам пройтись вместе по правильному его использованию. Базовое применение такое:
Обратите внимание, что в примере правило применяется к элементу img. Изображения являются инлайновыми элементами и находятся в одной строке с текстом, если это возможно. Но что значит “находятся в строке”? В этом месте и появляется vertical-align.
Допустимые значения: baseline (базовая линия), sub (нижний индекс), super (верхний индекс), top (верх), text-top (верх текста), middle (середина), bottom (низ), text-bottom (низ текста), точное значение или значение в процентах.
Путаница, по моему мнению, возникает когда вы пытаетесь применить вертикальное выравнивание к блоку с вложенными элементами и не видите никакого результата.
Если у вас есть небольшой блок, вложенный в блок побольше и вы хотите выровнять его по центру вертикально, то у вас ничего не выйдет.
Baseline
Значение по умолчанию у vertical-align (если вы не написали иного) — baseline. Изображение будет выстраиваться вместе с текстом по его базовой линии. Обратите внимание, что подстрочные элементы находятся ниже базовой линии, поэтому изображение не выстраивается по их уровню.
Middle
Пожалуй, самый распространенный способ использования свойства vertical-align. Выравнивает изображение по центру относительно текстовой базовой линии. Чаще всего результат будет кроссбрузерным.
Браузеры отлично справляются с вычислением высоты текста и изображения в пикселях и выравниванием картинки по центру.
Имейте ввиду, если изображение будет больше, чем текущий размер текста и высота строки, то картинка будет толкать следующие строки вниз, если не будет помещаться:
Text-bottom
В отличии от baseline выравнивает элемент по нижнему краю текста, включая подстрочные элементы. Изображение выравнивается по нижним выступающим частям текста:
Text-top
Противоположно text-bottom, выравнивает элемент по самой высокой точке текущего шрифта. Например, на рисунке изображен шрифт Georgia и у него есть более высокие выступающие элементы, чем в написанном слове. Элемент выравнивается по ним. Отсюда небольшой зазор.
Top и Bottom
Top и bottom аналогичны text-top и text-bottom, но выравнивание не ограничивается текстом. Например, если два изображения разного размера стоят в ряд с текстом, то их вершины (или основания) будут выровнены вне зависимости от текста.
Sub и Super
Эти значения отвечают за нижний и верхний индексы. Элементы выравниваются соответственно. Удобно для написания коротких математических формул (прим. переводчика).
Вертикальное выравнивание в ячейках таблицы
В отличии от выравнивания картинок контент в ячейках таблицы выровнен вертикально по центру:
Если вы хотите чтобы текст был расположен сверху или визу ячейки, то используйте значения top или bottom для вертикального выравнивания:
При вертикальном выравнивании в ячейках таблицы имеет смысл использовать только top, bottom или middle. Все остальные значения не дадут никакого визуального результата и будут иметь непредсказуемый результат в разных браузерах. Например, при использовании text-bottom в IE6 текст будет выровнен по нижнему краю ячейки, а в Safari4 — по верхнему. Sub выровняет текст по центру в IE6 и по верху в Safari4.
vertical-align и inline-block
Изображения, будучи строчными элементами, по факту ведут себя как inline-block. Вы можете задать им высоту и ширину и это сработает, в отличие от строчных собратьев.
Элементы inline-block ведут себя так же как изображения с вертикальным выравниванием, поэтому можете применять советы из пунктов выше. Тем не менее, следует помнить, что не все браузеры интерпретируют inline-block одинаково. Поэтому вертикальное выравнивание может быть меньшей из ваших проблем. Но это совсем другая история. Хотя…
Устаревший атрибут
Время от времени вы будете сталкиваться с атрибутом valign. Он применяется к ячейкам таблицы для вертикального выравнивания. Например<td valign=”top”>. Следует отметить, что этот способ является устаревшим и его не стоит применять. Действительно нет никаких оснований для его использования, поскольку все это вы можете сделать при помощи CSS.
HTML/CSS: как центрировать по вертикали
При изучении стилизации HTML-страниц и механизмов выравнивания элементов средствами CSS, начинающий разработчик, как правило, сначала знакомится со способами горизонтального выравнивания элементов. В их числе, например, text-align: center; и margin: 0 auto; . С выравниванием по вертикали возникает больше вопросов. В этой статье разберем пять способов выравнивания элементов в HTML и CSS по вертикали.
У каждого описанного способа есть свои преимущества и недостатки, поэтому подходить к их использованию стоит критически. В определенной ситуации один способ может подходить идеально, а другой — оказаться совершенно бесполезным.
1. У правила для горизонтального выравнивания текста text-align: center; , которое уже упоминалось выше, есть собрат, который называется vertical-align . Как и text-align , vertical-align выравнивает элементы со строчным или строчно-блочным типом бокса. Отличие в том, что свойство text-align применяется к родительскому блоку, а vertical-align необходимо применять непосредственно к выравниваемому элементу.
Свойство vertical-align удобно применять, когда необходимо, например, выровнять иконку внутри строки или два рядом стоящих строчно-блочных элемента. Важно понимать, что vertical-align выравнивает элемент относительно содержащей строки, а не относительно ближайших элементов.
Кроме того, свойство vertical-align можно использовать для того, чтобы выравнивать контент в ячейке таблицы.
2. Для тех, кто не знаком с принципами работы интерлиньяжа и свойством line-height , может стать откровением, что текст располагается посередине содержащей его строки. Этим можно пользоваться при выравнивании. Предположим, что у вас есть элементарный footer, в котором нужно расположить по центру копирайт:
Допустим, что высота футера равна 80px. Для того, чтобы текст вертикально встал ровно по центру, достаточно написать в CSS следующее:
У этого способа есть недостаток. Его удобно применять, когда вы уверены, что выравниваемый элемент не будет переполняться. В противном случае при переносе строки между текстом появятся большие вертикальные отступы, что почти наверняка станет нежелаемым поведением.
3. Для предотвращения нежелаемного поведения, описанного в примере выше, можно использовать метод выравнивания: padding . Значения padding-top и padding-bottom помогут вам не только центрировать по вертикали, но и застраховаться от переполнения. Рассмотрим пример:
Предположим, вы верстаете кнопку, при нажатии на которую происходит переход на страницу заказа товара. Высота кнопки не должна превышать 50px. Из макета вы выгрузили следующие стили:
Высота контента внутри кнопки равна высоте строки и составляет 20px. Чтобы текст кнопки встал по центру, необходимо распределить по свойствам padding-top и padding-bottom оставшееся пространство следующим образом: (50px — 20px) / 2.
В результате получаем следующее:
Если текст кнопки измениться с «Заказать» на «Заказать товар онлайн» и перестанет помещаться на одной строке, кнопка сохранит нужный вид, а текст внутри неё по-прежнему будет находиться по центру.
Выравнивание при помощи padding универсально и подходит как для фразовых элементов, так и для выравнивания элементов с блочным типом бокса (но только в некоторых случаях).
4. Еще один инструмент — Flexbox. Внутри flex-контейнера любой элемент, будь то блочный, строчный или даже псевдоэлемент, становится flex-элементом, с которым можно производить любые манипуляции. В этой статье мы не будем подробно останавливаться на flex-свойств, почитать о них можно, например, тут.
У Flexbox есть ряд преимуществ перед обыкновенным выравниванием — в первую очередь это создание крупных сеточных структур и макросеток.
5. А что, если элемент абсолютно спозиционирован? Предположим, что вы сверстали модальное окно, которое нужно спозиционировать не относительно другого элемента, а относительно окна браузера. В этом случае можно использовать position: fixed; .
Стоит отметить, что все описываемые далее действия применимы и в случаях, когда нужно выполнить абсолютное позиционирование внутри другого элемента.
Положением спозиционированных элементов управляют свойства top , right , bottom , left . Попробуем следующее:
В данном случае модальное окно расположено не верно: ровно по центру находится левый верхний угол модального окна, а не его физический центр. Для того, чтобы выполнить его абсолютное позиционирование, изменим положение модального окна с помощью отрицательного margin :
У применения свойства margin в этой ситуации существует один недостаток. При изменении свойств width и/или height модального окна вам придется вручную «подкручивать» значения отрицательного margin , чтобы добиться половины размера его ширины и высоты. Этого можно избежать, используя вместо margin свойство transform . А transform: translate(X, Y) позволяет регулировать смещение элемента относительно исходного положение. Например, так:
В отличие от свойства margin , значения которого вычисляются от ширины родительского элемента, transform: translate(X, Y) берет за основу габариты самого элемента — в данном случае, модального окна. А это то, что нам и нужно. В результате, модальное окно будет всегда находиться в центре. Независимо от своих размеров.
Как выровнять текст или блок по вертикали в CSS?
Делая верстку страницы, вы неизбежно столкнетесь с необходимостью сделать выравнивание текста по вертикали css, и у начинающих веб-разработчиков это может вызвать некоторые сложности.
В сегодняшней статье я хотела бы рассмотреть наиболее эффективные способы выравнивания текста по вертикали в CSS, которые вы смогли бы запомнить или добавить к себе куда-нибудь в шпаргалку и использовать в зависимости от ситуации.
Навигация по статье:
Свойство для вертикального выравнивания vertical-align
Базовым свойством, которое позволяет сделать в CSS выравнивание по вертикали является vertical-align.
В основном для выравнивания текста по вертикали css вам понадобятся значения top, middle, bottom. Они подходят для большинства случаев.
Так, в случае если нам нужно выровнять текст в каком-то блоке, то для начала оборачиваем его в тег </p> и задаем для него стиль vertical-align:middle;
Но на практике все оказывается немного сложней. Дело в том что данное свойство срабатывает только для табличных элементов и для того чтобы оно заработало нужно будет пойти на одну хитрость.
Для родительского элемента, то есть блока, в котором находится текст, мы задаем свойство display:table, а для абзаца с тексом – display:table-cell. В этом случае блок преобразуется в таблицу, а абзац в ячейку таблицы.
html — лучший способ вертикального выравнивания дочерних элементов в встроенном блоке
Задавать вопрос
спросил
Изменено 5 лет, 7 месяцев назад
Просмотрено 4к раз
Я пытаюсь выровнять содержимое голубого блока div по вертикали, не используя один из следующих методов:
Выравнивание по вертикали (поскольку оно требует отображения в виде таблицы и будет иметь косвенные эффекты для заполнения родительского элемента div и т.
д.)Высота строки (поскольку имеется более 1 строки с 3 фактическими интервалами)
Таблица (из-за эффекта удара, как при выравнивании по вертикали)
Абсолютное позиционирование (поскольку некоторые другие голубые элементы div будут иметь больше текста, чем другие, то есть в одних будет больше строк, чем в других)
Одинаковая верхняя и нижняя прокладка (по той же причине, что и позиционирование пресса)
Флексбоксы (я запрещаю их, так как они имеют серьезные побочные эффекты!)
Голубой элемент div является встроенным блоком. Каков наилучший способ добиться этого? Я хочу иметь возможность установить отступы между каждым из трех пролетов, чтобы они были хорошо разделены.
ПРИМЕЧАНИЕ: Я обновил свой ответ, включив гибкое позиционирование, но в мобильном представлении второй голубой div ниже не выровнен по центру
.sections { фон: #f2f2f2; ширина: 100%; высота: авто; выравнивание текста: по центру; отступ: 100px 10%; box-sizing: граница-коробка; } ч2 { размер шрифта: 62px; преобразование текста: верхний регистр; вес шрифта: 400; } п { размер шрифта: 22px; вес шрифта: 300; отступы сверху: 10px; } . foster-cta { box-sizing: граница-коробка; ширина: 250 пикселей; высота: 200 пикселей; фон: голубой; отображение: встроенный блок; граница: 1px сплошной серый; поле сверху: 30px; /* добавление display flex приводит к тому, что второй голубой элемент div ниже не выравнивается по центру в мобильной версии */ дисплей: гибкий; flex-направление: столбец; по выравниванию содержимого: равномерно по пространству; выравнивание элементов: по центру; дисплей: встроенный гибкий; } .foster-top { дисплей: блок; размер шрифта: 30px; } .фостер-средний { дисплей: блок; преобразование текста: верхний регистр; размер шрифта: 22px; } .фостер-дно { дисплей: блок; вес шрифта: 300; размер шрифта: 16px; }
<раздел>тег заголовка 1
какой-то случайный текст, чтобы пойти сюда lorem ipsum sit semei geono wfnwoenfowe fwenfuowe ffe efnpi enfo wfeonwofun weofun weofnwe ofunwe foiej.
<дел> значок здесь какой-то случайный текст здесь будет больше произвольного текста, который будет более описательным и длинным. <дел> значок текст сюда помещается больше случайного текста, который будет более описательным и длинным здесь загружается больше произвольного текста, который будет более описательным и длинным.
- HTML
- CSS
- Flexbox
Flexbox — ваш лучший выбор при любом выравнивании в CSS. Код тоже очень простой:
.div-parent { дисплей: гибкий; } .div-ребенок { выровнять себя: по центру; }
Это выровняет только вертикально по центру
Зарегистрируйтесь или войдите в систему
Зарегистрируйтесь с помощью Google Зарегистрироваться через Facebook Зарегистрируйтесь, используя адрес электронной почты и парольОпубликовать как гость
Электронная почтаТребуется, но никогда не отображается
Опубликовать как гость
Электронная почтаТребуется, но не отображается
Нажимая «Опубликовать свой ответ», вы соглашаетесь с нашими условиями обслуживания и подтверждаете, что прочитали и поняли нашу политику конфиденциальности и кодекс поведения.
Вертикальное выравнивание встроенного блока — Пользовательский код — Forum
wafrido77 (Вальфридо Нето) 1
Привет,
Во-первых, я люблю Webflow. Это изменило мою жизнь, и я большой поклонник.
Тем не менее… У меня проблема.
Я разрабатываю веб-сайт в команде с веб-разработчиком, который занимается интеграцией API с сайтом, пока я создаю макет на Webflow.
Он попросил меня, , а не , использовать Flex для вертикального выравнивания объектов, потому что он говорит, что это новое и нестабильное приложение, которое вызывает ошибки. Поэтому я должен использовать только блоки и встроенные блоки. Я подумал об использовании строк (столбцов), чтобы объекты выравнивались сверху. Но он попросил меня использовать только vertical-align: top.
Я поискал по форуму и нашел тему, в которой команда Webflow говорит, что в CSS нет вертикального выравнивания.
Я загрузил веб-сайт, отредактировал CSS в Dreamweaver, и вертикальное выравнивание сработало отлично.
Проблема в том, что теперь я должен выполнять редактирование всего кода вне веб-потока, потому что нет возможности добавить этот пользовательский код в веб-поток.
Есть предложения?
ааронокампо (Аарон Окампо) 2
Hello @walfrido77
Вы можете использовать компонент кода для встраивания, чтобы добавить стили css на свой сайт, просто добавьте компонент кода для встраивания на том же уровне, на котором вы хотите затронуть элемент, добавьте класс затронутого элемента и css, который вы хотите, вы сможете увидеть его даже в режиме предварительного просмотра.
2 лайка
(Вальфридо Нето) 3
Привет, @aaronocampo, большое спасибо за подсказку. Я попробовал, но у меня это не сработало…
Затем я нашел другой пост, в котором объясняется, как добавить пользовательский CSS с помощью встраивания HTML.
Надеюсь, теперь все будет работать нормально.
Спасибо!
1 Нравится
(Вальфридо Нето) 4
ааронокампо:компонент кода для встраивания
Итак… Я сделал то, что вы сказали, по другому почтовому индексу, но все равно не работает.
Кто-нибудь знает почему?
Это сайт: http://life-2. webflow.io/
А ниже скриншот того, что я сделал.
Мне нужно, чтобы div с изображением слева был выровнен по вертикали с текстом справа.
521243×704 227 КБ
Кто-нибудь может мне помочь?
ааронокампо (Аарон Окампо) 5
Не могли бы вы поделиться своей ссылкой только для чтения, пожалуйста?
университет.webflow.comПоделиться ссылкой только для чтения | Университет Вебфлоу
Узнайте, как поделиться своим проектом Webflow с помощью ссылки только для чтения. Узнайте, чем это отличается от приглашения соавторов и настройки групповых учетных записей.
1 Нравится
(Вальфридо Нето) 6
Я только что узнал, в чем проблема!
В имени моего класса был пробел между словами… поэтому класс CSS не работал.
Не работает идеально.
Большое спасибо, что поделились своими знаниями!
1 Нравится
(Аарон Окампо) 7
Рад, что смог помочь.
1 Нравится
Максимозавр (Максим Дюамель) 8
Привет @walfrido77
Другой способ без какого-либо пользовательского кода (настройки CSS веб-потока в Интернете) будет следующим:
1- установите родительский элемент вашего встроенного блока в положение: относительный
2- установить встроенный блок в положение: absolute
3- установить свойство top встроенного блока в top: 50%
4- установить свойство преобразования (переместить y) встроенного блока в -50%
24468× 626 20,7 КБ
01480×1326 42,8 КБ
Это работает, потому что свойство преобразования вычисляется на основе фактического размера элемента, а не его родителя.
Если вам нужно также центрировать по горизонтали, вы можете использовать комбинацию с левым: 50% и перемещением x: -50%.
Может быть, это поможет вам не выходить за пределы вебфлоу.
Макс.
2 лайков
Steven_Harris (Стивен Харрис) 9
Спасибо, что поделились другим сообщением @walfrido77
Спасибо за ответ в веб-потоке @Maximosaurus
1 Нравится
(Вальфридо Нето) 10
Привет @Maximosaurus, это выглядит гениально!! Большое спасибо, что поделились!
Обязательно попробую и этот.
вальфридо77 (Вальфридо Нето) 11
На всякий случай, если у кого-то еще возникла такая же проблема, я нашел самый простой способ (по крайней мере, самый простой на данный момент).
Вместо того, чтобы добавлять отдельные вставки для каждого вертикально выровненного объекта, я создал классы и код для них в пользовательском коде CSS при настройке каждой страницы, так что теперь все, что мне нужно сделать, это присвоить объекту класс для типа вертикальное выравнивание я хочу.
Я могу объяснить это лучше, если это кому-то нужно.
Максимозавр (Максим Дюамель) 12
Hey @walfrido77
Вы можете сделать это снова только в Webflow без специального кода.
(пользовательский код находится не в отдельном файле css, а в заголовке или нижнем колонтитуле в виде тега стиля (что, на мой взгляд, не самый чистый способ)
Относительно того, как я упоминал ранее, я буду делать так:
1 — создайте div и дайте ему класс center-align-parent (или что-то, что когда-либо имело для вас смысл) и установите его относительным
2 — создайте 2 div внутри div centering-parent и дайте им класс горизонтального выравнивания и вертикальное выравнивание соответственно
3 — установить горизонтальное выравнивание с абсолютным — левое 50% и преобразование x — 50%
4 — установить вертикальное выравнивание с абсолютным — верхнее 50% и преобразование y — 50%
Теперь вы можете удалить все классы в ваших стилях
Таким образом, когда вы хотите центрировать, вы можете добавить комбинированные классы к тому, что вы хотите
Итак, если вы хотите что-то вертикальное и горизонтальное посередине.
1 — добавить комбинированный класс center-align-parent к родительскому
2 — добавить комбинированные классы horizontal-align и vertical-align к дочернему элементу, который вы хотите центрировать.
Надеюсь, это имеет смысл.
Макс.
1 Нравится
Глубина 13
вальфридо77:«Он попросил меня , а не , использовать Flex для вертикального выравнивания объектов, потому что он говорит, что это новое и нестабильное приложение, которое вызывает ошибки»
Может ли кто-нибудь прокомментировать, является ли это обоснованной критикой гибкости?
1 Нравится
Максимозавр (Максим Дюамель) 14
Привет, @Fathom,
Возможно, я не очень хорошо разбираюсь в этом, но flexbox широко поддерживается всеми современными браузерами, и до сих пор я видел проблемы только в старых версиях Internet Explorer с моими проектами, использующими flexbox.
Вы всегда можете обратиться к разделу Могу ли я использовать… Таблицы поддержки для HTML5, CSS3 и т. д., которые дадут вам хорошую отправную точку для поддержки свойств CSS (это информативно и не может считаться на 100% точным).
Что касается обсуждения поддержки старых браузеров и технологий при проектировании/разработке веб-сайта, моя позиция будет зависеть от содержания и аудитории, которую вы пытаетесь охватить.
Если я делаю веб-сайт для государственной службы, я позабочусь о том, чтобы любой браузер правильно отображал содержимое, даже с Windows 95 и очень старой версией IE, иначе я, вероятно, немного упущу это. (Опять только моя точка зрения и вокруг этого можно найти бесконечные споры)
Вы также можете обратиться к Префиксу поставщика — Глоссарию веб-документов MDN: Определения веб-терминов | MDN для поддержки экспериментальных свойств.
Насколько мне известно, Webflow отлично справляется с созданием ретро-свойств, как вы могли видеть, открыв окно экспорта кода в одном из ваших проектов.
Надеюсь, это поможет вам.
Макс.
2 лайка
Глубина 15
Хороший ответ. Спасибо.
1 Нравится
(Вальфридо Нето) 16
Спасибо!
Просто для ясности: его критика Flexbox касалась не поддержки браузера, а интеграции с ERP API, который мы использовали в этом проекте.
В любом случае, было приятно узнать, что многое из того, что я делал с Flexbox, можно сделать с помощью Block и Inline-block, а также узнать немного больше о том, как работают все параметры отображения CSS.