Выравнивание контента по центру блока со скролом
Горизонтальное и вертикальное выравнивание внутри родительского блока со скролом
- Post author:Admin
- Post published:18.11.2020
- Post category:CSS / Flexbox / SCSS
Не так давно я столкнулся с проблемой выравнивания контента по центру блока со скролом, пришлось потратить некоторое время на поиски решения этой проблемы.
Горизонтальное центрирование контента по центру блока.
Для примера реализуем блок с горизонтальным скролом. Внутри которого будет блок типа flexbox. А внутри него будет некоторое количество элементов.
<div>
<div>
<div>Element</div>
<div>Element</div>
<div>Element</div>
<div>Element</div>
<div>Element</div>
<div>Element</div>
</div>
</div>.scroll { width: 400px; height: 60px; overflow-x: scroll; border: 1px solid #d1d1d1; } .flex-container { display: flex; justify-content: center; } .flex-item { padding: 6px 10px; border: 1px solid #d1d1d1; }
scroll {
width: 400px;
height: 60px;
overflow-x: scroll;
border: 1px solid #d1d1d1;
}
.flex-container {
display: flex;
justify-content: center;
}
.flex-item {
padding: 6px 10px;
border: 1px solid #d1d1d1;
}Если посмотреть на результат то на первый взгляд может показаться что все в порядке.
Но если проинспектировать код то можно заметить что ширина flex контейнера равна ширине родительского блока со скролом.
Теперь предположим что нам нужно отцентрировать элементы внутри flex контейнера.
Если элементов будет несколько то все будет нормально отображаться.
Но если элементов будет больше и появится горизонтальный скрол то можно заметить что отображение сломалось.
Положение скрола находится в начальном положении но первый элемент виден не полностью.
Эта проблема решается добавлением min-width: max-content; в .flex-container
О свойствах min-width можно почитать здесь. Стоит заметить что IE не поддерживает max-content.
.flex-container {
display: flex;
justify-content: center;
min-width: max-content;
}В примере ниже можно посмотреть проблему и ее решение.
Вертикальное выравнивание контента по центру блока.
Теперь давайте разберем пример с вертикальным выравниванием по центру блока со скролом.
Предположим у нас есть блок со скролом внутри которого нам нужно отцентрировать flexbox блок с элементами
<div>
<div>
<div>Element</div>
<div>Element</div>
<div>Element</div>
<div>Element</div>
<div>Element</div>
<div>Element</div>
<div>Element</div>
<div>Element</div>
<div>Element</div>
<div>Element</div>
</div>
</div>.scroll {
display: flex;
width: 400px;
height: 100px;
border: 1px solid #d1d1d1;
overflow-y: scroll;
}
.flex-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
}
. flex-item {
margin: 0 0 10px;
}
Результат такой же как и в предыдущем примере.
Но в инспекторе Google Chrome можно увидеть что высота flexbox контейнера равна родительскому блоку.
И если немного проскролить то можно увидеть что контент не обтекает содержимое. Но пока не включено вертикальное выравнивание контент отображается нормально.
Теперь включим выравнивание контента по центру. Если элементов мало то все отображается нормально.
А если при выравнивании flexbox контейнера в нем будет много элементов, которые занимают больше пространства и мы проинспектируем элемент то можно увидеть что первые элементы уходят за пределы видимости родительского контейнера.
Теперь давайте добавим flexbox контейнеру margin: auto; и посмотрим на результат.
Готово, теперь контейнер растянулся по содержимому.
В примере ниже можно наглядно посмотреть решение проблемы.
Про выравнивание margin’ами можно почитать здесь.
Спасибо за внимание, надеюсь эта статья была полезной.
Post Views: 1,061
Tags: CSS, Flexbox
как центрировать текст по горизонтали внутри HTML-элемента, такого как div или span
При кодировании макета веб-страницы в HTML вам часто нужно центрировать элементы внутри или внутри другого HTML-элемента. Центрирование текста (или любого элемента) означает горизонтальное выравнивание части содержимого по центру родительского тега. Довольно часто это будет текст, который необходимо центрировать, но это может быть изображение или любой другой визуальный контент.
Свойство CSS text-align тега указывает горизонтальное выравнивание его дочерних элементов. Есть несколько различных значений, которые вы можете использовать со свойством text-align: по левому краю, по правому краю, по центру, по ширине, по начальному и по наследству. Из этих значений должно быть очевидно, что вы можете указать center в качестве значения для выравнивания элемента по центру (или середине).
Почти любой визуальный элемент можно центрировать в блоке или любом теге макета. Общие и обычные родительские теги, с которыми вы, вероятно, столкнетесь, это div , span , p и т. д. Свойство text-align можно использовать с любым из этих тегов. В основном есть два разных способа указать эти свойства CSS: встроенный или во внешнем файле.
Текстовый элемент по центру в div или span
Встроенный HTML-код
Вы можете использовать атрибут стиля тега div или span, где бы вы ни определяли тег в HTML. Итак, если у вас есть элемент div с текстом внутри, как в примере ниже, вы можете указать свойство text-align , как в примере ниже.
Приведенный выше пример будет отображаться, как показано ниже. Я добавил синюю рамку, чтобы сделать родительский элемент видимым и узнаваемым. Это мой пример текста, который будет выравниваться по центру Вы также можете указать эти свойства во внешнем файле CSS, как вам следует, и это рекомендуемый подход. . В файле CSS: В HTML-странице: Это мой пример текста, который будет центрирован В большинстве случаев при работе с текст внутри тегов div или span, приведенного выше свойства CSS достаточно для достижения того, что вы хотите. В некоторых других сценариях, особенно когда используется тег дочернего блока, и вы хотите горизонтально центрировать весь блок, гарантируя, что левое и правое поля равны, вам также необходимо указать поле. В файле CSS: В зависимости от того, как блоки вложены друг в друга, и от вашего желаемого макета, вам может понадобиться указать поля и в дочернем блоке. На HTML-странице: В приведенном выше примере показано, как вы можете центрировать три разных элемента дочернего блока разной или различной ширины. Пример тестового параграфа находится здесь Как центрировать текстовое поле в Power… Пожалуйста, включите JavaScript Как центрировать текстовое поле в слайде PowerPoint (ЛЕГКО!) Здесь находится еще один тестовый абзац. Параграф № 2 Еще один фрагмент контента Если вы работаете со старыми версиями кода, то могли видеть тег center , который широко используется для достижения той же (или похожей) функциональности. По мере того, как ваш макет становится сложным с различными вложенными тегами и блочными элементами, иногда может быть довольно неприятно понять, почему текст или блок внутри тега div не центрируются даже после того, как вы его указали… вот некоторые обычные ошибки и советы по устранению неполадок. Кэшированных страниц: Это встречается чаще, чем вы думаете. Браузер может кэшировать страницу или файл CSS. Обязательно обновите страницу в обход кеша. Вы также можете удалить кеш явно. Может быть, также попробовать другой браузер, если это возможно. Ширина/выравнивание родительского блока: Убедитесь, что родительский блок или тег div имеют заданную ширину. Дочерние элементы отображаются относительно ширины родительского элемента, и иногда родительский элемент может не охватывать всю ширину, и даже при выравнивании по центру визуально он будет выглядеть ориентированным по левому краю, поскольку весь родительский блок выровнен по левому краю. Несколько вложенных блоков: При наличии нескольких вложенных блоков (span и div) может быть довольно сложно узнать все унаследованные правила для блока. Посмотрите, есть ли какие-либо свойства из родительского или предкового тега, которые наследуются вплоть до вашего блока или тега. Перекрывающиеся правила CSS: При указании правил CSS, особенно во внешнем файле, довольно легко иметь классы, которые имеют одинаковые свойства с разными значениями. Убедитесь, что ваш тег не использует несколько классов, в которых одно свойство переопределяется другим значением из другого класса. Пробелы и табуляции в правилах CSS: В большинстве случаев пробелы и пробелы обрабатываются правильно. Некоторые браузеры имеют проблемы с пробелами, особенно в начале имен классов или правил. Это может привести к тому, что правила вообще не будут выполняться, особенно если вы используете теги стиля в HTML. Что ж, использование инструмента разработчика для проверки макета страницы является обязательным, если вы застряли. Он доступен в большинстве браузеров, таких как Chrome или Firefox. Центрирование элемента HTML по горизонтали с помощью CSS, будь то «div» или «форма», всегда было легко для веб-разработчиков, по крайней мере, в течение последних 10 лет или около того. А как насчет центрирования одного и того же элемента по вертикали, чтобы он всегда оставался в центре страницы или в центре своего родительского элемента? Ну, это было очень сложной задачей в течение многих лет (по крайней мере, для меня), и некоторые разработчики также использовали JavaScript в некоторых ситуациях для получения желаемого результата. Это продолжало быть проблемой, по крайней мере для меня, до появления макета CSS flexbox и утилит flexbox, предлагаемых в Bootstrap 4. И это то, о чем мы будем говорить в сегодняшнем уроке. Мы увидим 3 примера где мы берем «div» и «форму» и выравниваем их по центру, вертикально и горизонтально , используя Bootstrap 4 (текущая версия 4.3.1). В конце урока вы можете загрузить все файлы в качестве удобных шаблонов. Начнем! В этом первом примере мы выровняем элемент «div» внутри его родительского «div», который имеет высота. Это окончательный результат : Мы добьемся этого с помощью некоторого кода HTML и CSS и некоторых удобных классов, предлагаемых Bootstrap 4. Давайте сначала посмотрим на код, а затем объясним его. HTML-код (файл index.html, весь код страницы не показываю): Учебник о том, как выровнять элемент div по вертикали и горизонтали в Bootstrap 4. Это наш выровненный по центру "div". Использование CSS
Вы можете создать именованное правило, а затем многократно использовать его в своем коде. В этом примере мы создаем правило или класс с именем mycenter
.mycenter {
text-align: center;
ширина: 80%;
}
Центрирование блока или элемента изображения в div или span
.myblockcenter {
text-align: center;
поле слева:авто;
поле справа: авто;
} 
Ниже приведен пример, в котором стили определены в строке для удобства использования, но вы также можете перенести их в файл CSS.
Тег center устарел, начиная с HTML 4, и не поддерживается в HTML 5, поэтому вам необходимо обновить его до CSS. Устранение неполадок
Вы можете отлаживать или выявлять такие проблемы с помощью инструмента разработчика или с помощью временных границ вокруг блоков.
Bootstrap 4: Выровнять Div или форму по вертикали и горизонтали
Пример 1. Выравнивание «Div» по центру другого «Div», фиксированная высота, не на весь экран
<дел>
<дел>
<дел>
<дел>
Bootstrap 4: Выровнять по центру
Делая это, мы включаем гибкое поведение и создаем контейнер flexbox (наш класс «div-wrapper»), а также преобразуем его непосредственные дочерние элементы во гибкие элементы, как описано в документации Bootstrap здесь.
Вот почему я добавил его, назовем его «бонусным» примером.