На заре Интернета центрировать что-либо на веб-странице было легко: просто поместите на это тег
Однако, переработав HTML до версии 4.0, Консорциум Всемирной паутины (W3C) отказался от центрального тега в своем энтузиазме по поводу разделения задач. Простота использования была принесена в жертву архитектурной чистоте. И центрирование вещей каким-то образом стало прерогативой каскадных таблиц стилей.
Это оказалось проблематичным, поскольку не было ничего, что могло бы напрямую заменить эффективный, но архитектурно неправильный центральный тег. W3C предоставил список новых элементов макета (заголовок, навигация и т. д.), но ни один из них не помог программисту распределить элементы внутри самой страницы.
«Изучив раскладку сетки, вы наверняка удивитесь, насколько все это кажется сложным!» На странице разработчиков Mozilla фактически говорилось о устаревших методах, которые впервые приняло веб-сообщество.
Честно говоря, размещение чего-либо в «середине» веб-страницы — это философская загадка, учитывая, что холст для веб-страницы HTML фактически бесконечен. У него нет сторон, нет верха и низа. Таким образом, середина должна определяться тем холстом, который разработчики помещают на страницу (если они понимают, что вообще должны это делать).
Элементы Div «придают элементам размер и перемещают их, чтобы выровнять их так, чтобы они выглядели как сетка».
–Документация сети разработчиков Mozilla.
Это был большой запрос на такую якобы демократическую технологию, как Интернет. Это привело многих веб-дизайнеров в замешательство, которое продолжалось более десяти лет, пока не появились CSS Grid и CSS Flexbox, упрощающие ситуацию.
Тем не менее, целое поколение веб-сайтов было создано без Grid или Flexbox, и сегодня, без сомнения, все еще есть много администраторов, которые не будут трогать устаревший и очень суетливый код для центрирования вещей, опасаясь, что один лишний или неуместный тег разрушит весь дизайн их сайта.
Итак, есть способ центрировать элементы на веб-странице с помощью Grid или Flexbox, который был собран на основе лучших практик, созданных сообществом. Все основано на HTML-теге
Divvy Up — это то, что делает Div
Тег HTML
Divs — это элементы, расположенные прямо под
в иерархии HTML-документа, точно так же, как следует за и иерархически находится под тегом верхнего уровня.Вы можете рассматривать каждый набор
как своего рода контейнер, с помощью которого вы можете стилизовать с помощью CSS (или манипулировать с помощью JavaScript), добавив сорт или идентификатор атрибут
Таким образом,
идентификаторы работают аналогичным образом, за исключением того, что они используют идентификаторы по хэштегам, а не по одной начальной точке.
Таким образом, самый простой способ центрировать часть контента на странице — использовать тег
Как объясняет Кевин Пауэлл в этом полезном видео, многие разработчики на самом деле называют этот
CSS ширина Свойству также можно задать фиксированную длину в пикселях (хотя фиксированная длина может быть проблематичной при изменении размера самого окна).
В приведенном выше фрагменте кода допуск Свойство размещает текст внутри сторон контейнера. Первое число («0») задает пространство над и под текстом, второе (установленное здесь как «авто») — это поля справа и слева от текста. При необходимости эти поля можно указать более точно с помощью длины или процентов.
Убедитесь, что все вызываемые классы заключаются в тупые кавычки («), а не в умные кавычки.
Приведенный выше код отображает центрируемый образец текста на странице:
Сумасшествие, это самый простой способ, приемлемый для всех браузеров, центрировать что-либо на веб-странице.
Увы, большинству веб-дизайнеров требуется больше центрирования.
Балансировка нескольких столбцов в окне браузера
Но сначала совершим экскурс в мир свойства CSS float. плавать Свойство изначально было разработано для размещения изображений внутри блоков. Если изображение меньше рамки, должно ли оно быть выровнено по правому или левому краю, вверху или внизу?
Но отчаявшиеся веб-разработчики обнаружили, что плаватьоднако его можно использовать для позиционирования любого элемента HTML. А именно, он может размещать меньшие элементы
Веб-страница с двумя столбцами может состоять из двух элементов div, один из которых перемещается влево, а другой — вправо. Их пропорции должны быть сбалансированы, чтобы они не превышали размер контейнера, или, как слишком много кошек у кормушки, чтобы они не вытесняли друг друга и не оставляли ваш участок однобоким. Вам придется вычислить эти цифры самостоятельно.
В приведенном выше примере контейнер занимает 90 % окна браузера, а два элемента div занимают 48 % каждый из 100 %, отведенных контейнеру
Вот как приведенный выше код отображается на странице:
Обратите внимание, что из-за неправильного порядка браузеров при расчете размера
А как насчет трех столбцов, любимых многими веб-сайтами (включая саму TNS с помощью WordPress)? Лучший подход — поиграть со свойствами элементов div и посмотреть, как они располагаются в окне браузера.
В приведенном выше примере указаны правый и левый столбцы. плавать направления для перемещения их вправо и влево соответственно, а среднему не дано плаватьпоэтому приземляется посередине.
Также в приведенном выше коде есть новый класс, называемый столбцом, который позволяет
Приведенный выше код будет отображаться следующим образом:
Как уже отмечалось, сегодня проще визуализировать макеты с несколькими столбцами с помощью Grid и/или Flexbox, которые мы рассмотрим в будущих руководствах. Однако сейчас вы можете гордиться тем, что являетесь одним из немногих разработчиков, которые действительно знают извечную загадку о том, как центрировать
ТЕНДЕНЦИОННЫЕ ИСТОРИИ YOUTUBE.COM/THENEWSTACK Технологии развиваются быстро, не пропустите ни одной серии. Подпишитесь на наш канал YouTube, чтобы смотреть все наши подкасты, интервью, демонстрации и многое другое. ПОДПИСАТЬСЯ Группа, созданная в Sketch. Джоаб Джексон — старший редактор The New Stack, специализирующийся на облачных вычислениях и системных операциях. Он освещал вопросы ИТ-инфраструктуры и ее развития более 30 лет, в том числе работал в IDG и Government Computer News. До этого он… Подробнее от Джоава Джексона
