Как сделать ссылку по центру
Выравнивание по центру в CSS
Давайте выстроим все возможные решения в виде древовидной схемы и будем надеяться, что это упростит нашу задачу.
Итак, мне нужно выравнять элемент по центру.
Горизонтальное выравнивание
Выравнивание по центру строкового или строково-* элемента
Выравнивать по центру строковые элементы внутри блочного родительского элемента можно достаточно просто:
See the Pen Centering Inline Elements by Chris Coyier (@chriscoyier) on CodePen.
Выравнивание по центру блочного элемента
Выравнять по центру блочный элемент вы можете установив свойствам margin-left и margin-right значение auto (у него также должна быть задана ширина, иначе элемент просто займёт всю ширину контента и не будет необходимости в выравнивании). Чаще всего это делается с помощью сокращённого свойства, вот так:
See the Pen Centering Single Block Level Element by Chris Coyier (@chriscoyier) on CodePen.
Это будет работать независимо от того какая ширина установленная у блочного элемента или его родителя.
Обратите внимание, что вы не сможете обтекать элемент выравненный по центру таким способом. Однако и для этого есть трюк.
Выравнивание по центру нескольких блочных элементов
Если есть два или более блочных элементов, которые вам нужно выравнять горизонтально по центру в пределах одной строки, то возможно вам лучше изменить их тип отображения. Ниже приведён пример изменения их типа отображения на inline-block и пример с Flexbox:
See the Pen Centering Row of Blocks by Chris Coyier (@chriscoyier) on CodePen.
Если эти несколько блоков расположены на разных строках, то техника с автоматическими отступами по прежнему прекрасна:
See the Pen Centering Blocks on Top of Each Other by Chris Coyier (@chriscoyier) on CodePen.
Вертикальное выравнивание
Вертикальное выравнивание по центру в CSS немного сложнее.
Выравнивание по центру строкового или строково-* элемента
Выравнивание элемента с одной строкой
See the Pen Centering text (kinda) with Padding by Chris Coyier (@chriscoyier) on CodePen.
See the Pen Centering a line with line-height by Chris Coyier (@chriscoyier) on CodePen.
Выравнивание многострочного элемента
Одинаковые отступы сверху и снизу могут создать эффект выравнивания по центру и для многострочных элементов, но если это не сработает, то возможно что элемент в котором находится текст является ячейкой таблицы, либо такое его поведение явно задано со помощью CSS. В данном свойство vertical-align обрабатывает это, в отличии от того что оно обычно обрабатывает выравнивание элементов внутри строки.
See the Pen Centering text (kinda) with Padding by Chris Coyier (@chriscoyier) on CodePen.
See the Pen Vertical Center Multi Lines of Text with Flexbox by Chris Coyier (@chriscoyier) on CodePen.
Если обе техники приведённые выше нельзя применить, вы можете использовать технику «призрачного элемента», в которой псевдоэлемент с высотой в 100% размещается внутри контейнера и тех выравнивается вертикально по центру него.
See the Pen Ghost Centering Multi Line Text by Chris Coyier (@chriscoyier) on CodePen.
Выравнивание по центру блочного элемента
Выравнивание элемента с известной высотой
Довольно часто мы не можем знать высоту, по многим причинам: если изменяется ширина, текст может форматироваться и изменять высоту. Разная стилизация текста может изменять высоту. Разный размер шрифта может изменить высоту. Элементы с фиксированным соотношением сторон, такие как изображения, могут изменять высоту при изменении собственных размеров и т.д.
Но если вы знаете высоту элемента, то можете выравнивать по центру вот так:
See the Pen Center Block with Fixed Height by Chris Coyier (@chriscoyier) on CodePen.
Выравнивание элемента с неизвестной высотой
Даже если вы не знаете высоту элемента, его всё ещё можно протолкнуть на 50% высоты его родителя, а после поднять на 50% его собственной высоты:
See the Pen Center Block with Unknown Height by Chris Coyier (@chriscoyier) on CodePen.
Выравнивание элемента с помощью Flexbox
Небольшой сюрприз, это можно очень просто сделать с помощью Flexbox.
See the Pen Center Block with Unknown Height with Flexbox by Chris Coyier (@chriscoyier) on CodePen.
Горизонтальное и вертикальное выравнивание
Вы можете комбинировать представленные выше техники для того чтобы получить идеально выравненные по центру элементы. Но обычно их можно разделить на 4 группы:
Выравнивание элемента с фиксированной шириной и высотой
Использование отрицательных отступов ( maring ) равных половине этой ширины и высоты после абсолютного позиционирования элемента 50% / 50% выравняют элемент по центру. У этого способа достаточно хорошая кроссбраузерная поддержка:
See the Pen Center Block with Fixed Height and Width by Chris Coyier (@chriscoyier) on CodePen.
Выравнивание элемента с неизвестной шириной и высотой
Если вы не знаете ширину или высоту элемента, то можете использовать свойство transform и отрицательный translate в 50% в обоих направлениях (в зависимости от текущей ширины / высоты элемента) до центра:
See the Pen Center Block with Unknown Height and Width by Chris Coyier (@chriscoyier) on CodePen.
Выравнивание элемента с помощью Flexbox
Чтобы выровнять элемент по центру с помощью Flexbox вам нужно использовать два свойства центрирования:
See the Pen Center Block with Unknown Height and Width with Flexbox by Chris Coyier (@chriscoyier) on CodePen.
Выравнивание элемента с помощью CSS Grid
Это просто небольшой трюк (присланный Lance Janssen), который в большей степени будет работать для одного элемента:
See the Pen Centering with Grid by Chris Coyier (@chriscoyier) on CodePen.
Вывод
Теперь вы можете всё что угодно выравнять по центру в CSS.
Центрирование в CSS
Дата публикации: 2020-11-04
От автора: данная статья предлагает руководство ко всему, что вам нужно знать о центрировании в CSS.
Горизонтальное центрирование
1. Встроенные элементы
text-align
Для центрирования встроенного элемента, такого как ссылка, span или изображение, все, что вам нужно, это text-align: center.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Для нескольких встроенных элементов процесс аналогичен. Это возможно при использовании text-align: center.
Flexbox
Изменив display на flex гибкий, мы можем легко центрировать содержимое.
Даже для нескольких встроенных элементов центрирование работает без проблем.
CSS-сетка
С помощью сеточного контейнера тарелка будет центрирована в соответствии с ее областью сетки. Обратите внимание, что это не будет работать с более чем одной тарелкой, если они не будут обернуты в один элемент.
2. Блочные элементы
Auto Margin
Элемент блока с известной шириной и высотой можно центрировать, используя значение auto для левого и правого полей.
Auto Margin
Для нескольких блочных элементов их нужно заключить в элемент, который нужно центрироваться.
Flexbox
Вы можете использовать flexbox для центрирования тарелки.
Также не нужно оборачивать тарелки в контейнер, чтобы выровнять их по центру. Flexbox может это сделать!
CSS позиционирование
Абсолютно позиционируя тарелку, мы можем легко центрировать ее по горизонтали с помощью преобразований CSS.
Если ширина элемента известна, вы можете использовать вместо преобразований CSS отрицательное поле.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Расположение div по центру и другие тонкости позиционирования
Преимущества верстки с помощью тега
Существует два основных типа построения структуры сайта:
Табличная верстка была доминирующей еще на заре зарождения интернета. К ее преимуществам можно отнести точность заданного позиционирования. Но, тем не менее, она обладает явными недостатками. Главными из них является объемность кода и низкая скорость загрузки.
Тем не менее, табличную верстку следует использовать для структуризации отображения данных на странице. Классическим примером ее применения является отображение таблиц.
Блочное построение на основе тегов
Средства позиционирования
В блочной верстке позиционирование слоев лучше осуществлять с помощью средств каскадных таблиц стилей. Основным свойством CSS, отвечающим за расположение
Рассмотрим облегченный пример позиционирования блоков div с помощью этого свойства:
Центрирование слоев
В следующем примере мы будем использовать слой-контейнер, в котором разместим остальные элементы. Это решает проблему смещения блоков друг относительно друга при изменении размеров окна. Центрирование контейнера посредине осуществляется с помощью задания свойствам margin нулевого значения отступам от верхнего края и auto по бокам ( margin: 0 auto ):
После изменения все блоки выстроятся строго в ряд посредине. И их положение не изменится при любых размерах окна браузера. Вот как выглядит такое центрирование div по центру по вертикали:
Как из слоя сделать ссылку
Как ни странно звучит, но такое возможно. Иногда div блок как ссылка может понадобиться при верстке различных видов меню. Рассмотрим практический пример реализации слоя-ссылки:
Скрытие и отображение блочных элементов
Блочные элементы предоставляют больше возможностей для расширения функционала интерфейса, чем устаревшая табличная верстка. Часто бывает, что дизайн сайта является уникальным и узнаваемым. Но за такой эксклюзив приходиться платить нехваткой свободного места.
Особенно это касается главной страницы, стоимость размещения рекламы на которой является самой высокой. Поэтому и появляется проблема, куда бы « впихнуть » еще один рекламный баннер. И тут уж выравниванием div по центру страницы никак не отделаешься!
Более рациональным решением является сделать какой-нибудь блок скрывающимся. Вот простой пример такой реализации:
Синтаксис display :
display: block | inline | inline-block | inline-table | list-item | none | run-in | table | table-caption | table-cell | table-column-group | table-column | table-footer-group | table-header-group | table-row | table-row-group
Как видите, данное свойство может принимать множество значений. Поэтому является очень полезным и может использоваться для позиционирования элементов. В одном из предыдущих примеров с помощью одного из его значений ( inline-block ) мы реализовали выравнивание div внутри div по центру.
Для скрытия и показа слоя мы использовали два значения свойства display :
Мы с вами рассмотрели все основные слои настоящего сайта. Надеемся, что полученные знания позволят вам « испечь » по-настоящему вкусный ресурс.
Как выровнять по центру в CSS
Как часто у вас, как у веб-дизайнера, возникает задача при помощи CSS выровнять по центру какой-либо элемент на странице? Иногда это сделать очень легко, а иногда приходится повозиться. В этой статье предлагаю раз и навсегда разобраться в данном вопросе чтобы выравнивание в CSS не вызывало у вас никаких проблем.
Подсказка: наведите курсор на правый нижний угол.
Как в CSS выровнять по горизонтали?
В зависимости от того, какой элемент вам нужно выровнять по центру горизонтально, можно воспользоваться одним из следующих способов.
text-align: center
margin: auto
Если ширина блока неизвестна или вы не хотите ее жестко ограничивать, данный метод не подходит.
Как в CSS выровнять по вертикали?
Часто именно выравнивание по вертикали вызывает большое количество трудностей и непонимания. Но на самом деле ничего сложного в этом нет. Давайте разберемся по порядку.
padding или line-height
Обратите внимание, что значения height и line-height должны быть равными.
vertical-align: middle
Свойство CSS vertical-align выравнивает элемент по вертикали относительно родительского элемента, окружающего текста или ячейки таблицы. Однако с ним не все так просто. Это свойство работает только для inline-элементов (span, img и т.д) и элементов с display: inline-block ;
Кроме того, при помощи свойства vertical-align можно выровнять по вертикали содержимое ячеек таблицы. Этим можно воспользоваться для того, чтобы выровнять блочный элемент, хакнуть систему, так сказать.
Для того, чтобы этот метод работал, как задумано, нужно задать абсолютные (в px) размеры родительского элемента. У дочернего элемента ширина и высота могут быть относительными (например, в %).
Лично я не рекомендую использовать этот способ. Он старый и глючный, был придуман во времена, когда еще нужно было оптимизировать под Internet Explorer, не нужно было делать дизайн адаптивным и не существовало flexbox и других современных способов, о которых речь пойдет ниже.
transform: translate()
Свойство CSS transform позволяет двигать, вращать, изменять размер и форму элемента. Этот инструмент настоящий must have для создания современных адаптивных и интерактивных дизайнов. Поэтому ему будет посвящена отдельная статья (а может и две 😉
В рамках этой статьи рассмотрим использование свойства transform c функцией translate() в качестве значения. Суть метода сводится к следующему:
flexbox CSS
Ну а пока вернемся к выравниванию по центру.
Теперь давайте разберемся, что все это значит.
display: flex
При помощи этого свойства преобразуем родительский элемент в так называемый гибкий контейнер (flex container), при этом все вложенные элементыпервого уровня (т.е. непосредственные дочерние элементы) становятся так называемыми гибкими элементами(flex items), и вместе это все составляет flexbox лэйаут.
justify-content: center
align-items: center
Кроме основной оси в flexbox есть перпендикулярная ей второстепенная ось. В данном случае, она вертикальная. Свойство align-items описывает, как элементы контейнера расположены относительно нее.
Вот примерно то, что должно получиться.
Как вы, наверное догадались я предпочитаю использовать именно этот способ. Но это не значит, что я не пользуюсь другими. Все эти способы можно и нужно использовать (за исключением способа с vertical-align: middle и display: table-cell ), каждый в своей ситуации. Например, незачем использовать flexbox если вам просто нужно cвыровнять текст или картинку по центру горизонтально.
Надеюсь, вы нашли в этой статье то, что искали. А если нет, спросите в комментариях, я обязательно отвечу. Всем удачного центрирвания!
Выравниваем блок по центру страницы
Очень часто стоит задача выровнять блок по центру страницы / экрана, да ещё и так, чтобы без ява-скрипта, без задания жёстких размеров или отрицательных отступов, ещё чтобы и скроллбары работали у родителя, если блок превышает его размеры. В сети ходят достаточно много однообразных примеров как выровнять блок по центру экрана. Как правило большинство из них основаны на одних принципах.
Ниже представлены основные способы решения задачи, их плюсы и минусы. Чтобы понимать суть примеров, рекомендую уменьшить высоту / ширину окошка Result в примерах по указанным ссылкам.
Вариант 1. Отрицательный отступ.
Позиционируем блок атрибутами top и left на 50%, и заранее зная высоту и ширину блока, задаём отрицательный margin, который равен половине размера блока. Огромным минусом данного варианта является то, что нужно подсчитывать отрицательные отступы. Так же блок не совсем корректно ведёт себя в окружении скроллбаров — он попросту обрезается так как имеет отрицательные отступы.
Вариант 2. Автоматический отступ.
Менее распространённый, но схожий с первым. Для блока задаём ширину и высоту, позиционируем атрибутами top right bottom left на 0, и задаём margin auto. Плюсом данного варианта являются рабочие скроллбары у родителя, если у последнего задана 100% ширина и высота. Минусом данного способ является жёсткое задание размеров.
Вариант 3. Таблица.
Задаём родителю табличные стили, ячейке родителя устанавливаем выравнивание текста по центру. А блоку задаём модель строчного блока. Минусами мы получаем не рабочие скроллбары, и в целом не эстетичность «эмуляции» таблицы.
Чтобы добавить скролл в данный пример, придётся добавить в конструкцию ещё один элемент.
Пример: jsfiddle.net/serdidg/fk5nqh52/3.
Вариант 4. Псевдо-элемент.
Данный вариант лишён всех проблем, перечисленных у предыдущих способов, а так же решает первоначально поставленные задачи. Суть состоит в том, чтобы у родителя задать стили псевдо-элементу before, а именно 100% высоту, выравнивание по центру и модель строчного блока. Так же само и у блока ставится модель строчного блока, выравнивание по центру. Чтобы блок не «падал» под псевдо-элемент, когда размеры первого больше чем родителя, указываем родителю white-space: nowrap и font-size: 0, после чего у блока отменяем эти стили следующими — white-space: normal. В данном примере font-size: 0 нужен для того, чтобы убрать образовавшийся пробел между родителем и блоком в связи с форматированием кода. Пробел можно убрать и иными способами, но лучшим считается просто его не допускать.
либо, если вам нужно, чтобы родитель занимал только высоту и ширину окна, а не всей страницы:
Вариант 5. Flexbox.
Одним из самых простых и элегантных способов является использования flexbox. Но имейте ввиду, что центральное позиционирование сохраняется даже если родительский блок меньше дочернего, последний будет выходить за рамки и обрезаться.
В случае, если при уменьшении родительского блока дочерний не должен обрезаться по краям, используйте авто маржины:
Вариант 6. Transform.
Вариант 7. Кнопка.
Пользователь azproduction предложил вариант, где блок обрамляется в тег button. Кнопка имеет свойство центрировать всё, что находится у неё внутри, а именно элементы строчной и блочно-строчной (inline-block) модели. На практике использовать не рекомендую.