Содержание

Как выровнять div по центру в HTML — Примеры

Ранее были показаны способы вертикального выравнивания, теперь остановимся на горизонтальном.

text-align: center;

Свойство CSS text-align выравнивает содержимое тега и принимает значения

text-align: center;
по центру
text-align: justify; — по ширине, когда браузер добавляет пробелы между словами, чтобы не было отступов с краёв. text-align: justify; — по ширине выравнивается последняя или единственная строка
text-align: left;
по левому краю
text-align: right;
по правому краю

Если указать text-align: center для встроенного элемента [занимаемого только ширину содержимого], то ничего не произойдёт, поскольку тег не может себя двигать:
<span>текст</span>
текст

Если для блочного [занимаемого всю доступную ширину], то содержимое элемента переместиться в центр

<div>текст</div>

текст


В качестве содержимого может выступать и другой тег.
<div>
  <span>встроенный элемент <br /> в две строки</span>
</div>

встроенный элемент

в две строки


Помог при выравнивании модального окна на CSS:
<div>
  <div>обтекаемый <br /> блочный элемент</div>
</div>

обтекаемый
блочный элемент


А вот блочный тег как и при display: table никак не хочет становиться по середине, перемещается лишь его текст
<div>
  <div>блочный элемент <br /> фиксированной ширины</div>
</div>

блочный элемент
фиксированной ширины

margin: 0 auto;

Свойство margin решает проблему

<div>
  <div>блочный элемент <br /> определённой ширины</div>
</div>

блочный элемент
определённой ширины


Чтобы выровнять картинку по центру, нужно прописать, что она стала блочной без указания её width
<img src="URL_изо"/>

width можно не рассчитывать и при display: table

<div>
  <div>блочная <br /> таблица</div>
</div>

блочная
таблица

float

float не имеет значения center

float: left;
обтекание слева

float: right;
обтекание справа

Для старых браузеров, чтобы выравнять блок, не имеющий фиксированной ширины, можно воспользоваться методом, описанным тут [Студия Артемия Лебедева] http://nocode.in/aligning-text-smartly-in-css/

Выравнивание элементов во Flex контейнере — CSS

Одной из причин быстрого роста популярности flexbox среди веб-разработчиков было то, что впервые были предоставлены адекватные возможности выравнивания. Он предоставил адекватное вертикальное выравнивание, и стало возможным, наконец, легко поместить элемент в центр по вертикали. В этом руководстве детально рассматривается, как выравнивание и распределение работают во Flexbox.

Для центрирования элемента по перекрёстной оси (в данном случае — вертикальной) используется свойство 

align-items. Для центрирования элемента по главной оси (в данном случае — горизонтально), используется свойство justify-content.

На примере ниже можно изменить размер контейнера или вложенного элемента, но элемент всегда останется по центру.

В этом руководстве рассматриваются следующие свойства:

  • justify-content — управляет выравниванием элементов по главной оси.
  • align-items — управляет выравниванием элементов по перекрёстной оси.
  • align-self — управляет выравниванием конкретного flex элемента по перекрёстной оси.
  • align-content — описывается в спецификации как “упаковка flex строк”; управляет промежутками между flex строками по перекрёстной оси.

Также будет рассмотрены авто-отступы для выравнивания элементов во flexbox.

Замечание: Свойства выравнивания во Flexbox помещены в отдельную спецификацию — CSS Box Alignment Level 3. Ожидается, что данная спецификация в конце концов заменит свойства, определённые во Flexbox Level One.

Свойства align-items и align-self управляют выравниванием flex элементов по перекрёстной оси: вертикальной для flex-direction установленным в row, и горизонтальной для flex-direction установленным в column.

Рассмотрим выравнивание по перекрёстной оси на простейшем примере. Если установить display: flex у контейнера, все дочерние элементы становятся flex элементами, выстроенными в ряд. Все они по вертикали примут размер самого высокого элемента, который станет определяющим вертикального размера. Если у flex контейнера задана высота, то все элементы растянутся до высоты контейнера, независимо от размера содержимого.

Все элементы становятся одной высоты, т.к. по умолчанию свойство align-items имеет значение stretch.

Другие возможные значения свойства:

  • align-items: flex-start
  • align-items: flex-end
  • align-items: center
  • align-items: stretch
  • align-items: baseline

В примере ниже значение свойств align-items установлено в stretch. Попробуйте другие значения для понимания их действия.

 

Выравнивание одного элемента при помощи 

align-self

Свойство align-items устанавливает align-self для всех flex элементов как для группы. Это означает, что можно явно указать значение 

align-self для конкретного элемента. Свойство align-self может принимать все те же значения, что и свойство align-items, а так же значение auto, которое сбросит значение, установленное в flex контейнере.

В следующем примере, у flex контейнера установлено align-items: flex-start, означающее, что все элементы будут выравнены по началу перекрёстной оси. У первого элемента с помощью first-child селектора установлено align-items: stretch; у следующего элемента с классом selected установлено align-self: center. Можно изменять значение align-items на контейнере или align-self на элементе для изучения их работы.8н

 

Изменение основной оси

До сего момента мы изучали поведение при flex-direction установленном в row

, в языке, использующем написание сверху вниз. Это означает, что основная ось идёт горизонтально, а выравнивание по перекрёстной оси сдвигает элементы вверх или вниз.

Если изменить flex-direction на column, align-items и align-self будут сдвигать элементы влево или вправо.

Можно попробовать пример ниже, где установлено flex-direction: column.

 

До сих пор мы выравнивали элементы внутри flex-контейнера. Если содержимое вашего flex контейнера переносится на несколько строк, используйте свойство align-content для управления свободным пространством между строками. В спецификации это описано как упаковка flex-строк.

Чтобы свойство align-content работало, необходимо, чтобы в flex-контейнере было больше места, что требуется для отображения всего содержимого. Оно применяется ко всем элементам как группе, и управляет распределением свободного места и положением всей группы элементов внутри контейнера.

Свойство align-content принимает следующие значения:

  • align-content: flex-start
  • align-content: flex-end
  • align-content: center
  • align-content: space-between
  • align-content: space-around
  • align-content: stretch
  • align-content: space-evenly (не описано в спецификации Flexbox)

В примере ниже flex контейнер имеет высоту 400 пикселей — больше, чем необходимо для отображения всех элементов. Значение align-content установлено в space-between, означающее, что свободное пространство разделено между строками, расположенными вплотную к началу и концу контейнера по перекрёстной оси.

Попробуйте другие значения align-content для понимания принципа их работы.

 

Также можно сменить значение flex-direction на column и увидеть, как наше свойство работает в режиме колонок. Как и ранее, что увидеть работу свойства, у контейнера должно быть больше свободного места, чем требуется содержимому.

 

Замечание: значение space-evenly не определено в спецификации flexbox и добавлено позже в спецификацию Box Alignment. Поддержка браузерами этого значение не так широка, как значений определённым в спецификации flexbox.

В документации по justify-content на MDN приведено больше деталей о всех значениях и поддержке браузерами.

Теперь, когда мы увидели, как работает выравнивание по перекрёстной оси, можно посмотреть на главную ось. Здесь нам доступно только одно свойство —

justify-content. Это обусловлено тем, что с элементами на  главной оси мы работаем только как с группой. Используя свойство justify-content, мы контролируем, что происходит со свободным пространством на главной оси, и требуется ли нам больше пространства, чем нужно для отображения наших элементов.

В нашем первом примере с использованием свойства display: flex, применённым к контейнеру, элементы отображаются как строка и выстраиваются в начале блока. Это обусловлено тем, что свойство justify-content имеет начальное значение flex-start. Все свободное место располагается в конце контейнера.

Свойство justify-content может принимать те же самые значения, что и align-content.

  • justify-content: flex-start
  • justify-content: flex-end
  • justify-content: center
  • justify-content: space-between
  • justify-content: space-around
  • justify-content: stretch
  • justify-content: space-evenly (не определено в спецификации Flexbox)

В примере ниже, свойству justify-content задано значение space-between. Все доступное пространство распределяется между элементами после их позиционирования в контейнере. Первый и последний элементы занимают положения в начале и в конце контейнера соответственно.

Если свойство flex-direction имеет значение column, то свойство justify-content распределит доступное пространство в контейнере между элементами.

 

Выравнивание и режим записи

Необходимо помнить, что при использовании свойств flex-start и

flex-end элементы позиционируются в режиме записи. Если свойству justify-content задано значение start и стоит режим записи left-to-right (слева-направо), как в английском, то элементы выравниваются, начиная с левой стороны контейнера.

Однако, если задан режим записи right-to-left (справа-налево), как в арабском языке, то элементы будут выстраиваться с правой стороны контейнера.

В примере ниже свойству property задано значение rtl, которое изменяет порядок наших элементов. Вы можете удалить это свойство или изменить значение свойства justify-content, чтобы увидеть, как работает flexbox, когда отображение элементов начинается справа.

 

Начальное положение элементов поменяется, если вы измените значение свойства flex-direction — например установите row-reverse вместо row

.

В следующем примере заданы следующие свойства: flex-direction: row-reverse и justify-content: flex-end. В языках с параметром записи ltr все элементы будут отображаться с левой стороны. Попробуйте изменить свойство flex-direction: row-reverse на flex-direction: row. Вы увидите, что теперь элементы отображаются реверсивно.

 

Может показаться немного запутанным, но главное правило, которое необходимо запомнить – до тех пор, пока вы не измените свойство flex-direction, элементы контейнера выстраиваются в режиме записи вашего языка (ltr или rtl). 

Вы можете сделать отображение элементов контейнера блочным, задав свойству flex-direction значение  column. Свойство flex-start будет отображать элементы в столбец сверху вниз. Таким образом, первый элемент будет первым параграфом.

Если вы зададите свойству flex-direction реверсивное значение, то элементы будут позиционироваться в обратном порядке. Так, свойство flex-start будет брать начало в конце контейнера. Первый элемент будет находится в конце строки, если задано строчное отображение элементов или в конце параграфа, если задано блочное отображение.   

Так как элементы, расположенные на главной оси, обрабатываются как группа, свойства justify-items или justify-self становятся недоступными. Тем не менее, существует способ отделить конкретный элемент или группу элементов от остальных, используя внешний отступ margin со значением auto

Распространённый пример — панель навигации, в которой отдельные важные элементы выровнены по правому краю, а основная группа элементов — по левому.

На первый взгляд может показаться, что этот пример использования свойства justify-self. Однако, рассмотрим следующий ниже пример. Имеется три элемента с одной стороны и два — с другой. Если бы мы могли использовать justify-self на элементе d, это также изменило бы выравнивание следующего элемента — e, что может противоречить первоначальному замыслу.

Вместо этого мы можем выбрать четвёртый элемент (d) и отделить его от первых трёх, задав ему значение auto для margin-left. Авто-margin заполнит всё доступное свободное место по своей оси. Тем же образом работает margin-right. Оба свойства со значениями auto отцентрируют блок, так как каждый из отступов будет пытаться занять максимум пространства.

В интерактивном примере ниже у нас имеется простой ряд из флекс-элементов и класс push с заданным margin-left: auto. Вы можете, например, попробовать удалить это значение или добавить класс другому элементу, чтобы увидеть, как работает этот метод. 

 

В начале этой статьи объясняется, что свойства выравнивания, которые в настоящее время содержатся в спецификации Flexbox Level 1, также включены в спецификацию Box Alignment Level 3, которая в дальнейшем может расширить эти свойства и значения. Мы уже видели, как это произошло с введением значения space-evenly для свойств align-content и justify-content.

Выравнивание во Flexbox также включает в себя другие методы создания пространства между элементами, такие как column-gap and row-gap, как показано в макете CSS Grid Layout. Включение этих свойств в Box Alignment означает, что в будущем мы также сможем использовать column-gap и row-gap во Flexbox разметке. Это означает, что вам не нужно будет использовать отступы, чтобы создать пространство между элементами.

Моё предложение заключается в том, чтобы при изучении выравнивания во Flexbox, делать это параллельно с выравниванием в Grid Layout. В обеих спецификациях используются свойства выравнивания, подобные Flexbox. Вы можете видеть, как эти свойства ведут себя при работе с сеткой в статье Box Alignment in Grid Layout, а также рассмотреть как выравнивание работает в этих спецификациях в статье Box Alignment Cheatsheet.

Смотрите Также

  • Выравнивание Коробки
  • Выравнивание Коробки в Flexbox (Гибкая Коробка)
  • Выравнивание Коробки в Grid Layout (Макет Сетки)

Использование jQuery для центрирования DIV на экране

Редактировать:

Если вопрос научил меня чему-то, то это так: не меняйте то, что уже работает 🙂

Я предоставляю (почти) дословную копию того, как это было обработано на http://www.jakpsatweb.cz/css/css-vertical-center-solution.html — он сильно взломан для IE, но предоставляет чистый способ CSS отвечая на вопрос:

.container {display:table; height:100%; position:absolute; overflow:hidden; width:100%;}
.helper    {#position:absolute; #top:50%;
            display:table-cell; vertical-align:middle;}
.content   {#position:relative; #top:-50%;
            margin:0 auto; width:200px; border:1px solid orange;}

Скрипка: http://jsfiddle.net/S9upd/4/

Я пробежал по браузерным снимкам, и, кажется, все в порядке; если не для чего иного, я оставлю оригинал ниже, так что обработка процентной маржи в соответствии со спецификацией CSS увидит свет.

Оригинал:

Похоже, я опоздал на вечеринку!

Выше есть несколько комментариев, которые предполагают, что это вопрос CSS — разделение интересов и все. Позвольте мне предвосхитить это, сказав, что CSS действительно выстрелил себе в ногу на этом. Я имею в виду, как легко это сделать:

.container {
    position:absolute;
    left: 50%;
    top: 50%;
    overflow:visible;
}
.content {
    position:relative;
    margin:-50% 50% 50% -50%;
}

Правильно? Левый верхний угол контейнера будет в центре экрана, а с отрицательными полями содержимое будет волшебным образом появляться в абсолютном центре страницы! http://jsfiddle.net/rJPPc/

Неправильно! Горизонтальное расположение в порядке, но вертикально … О, я вижу. Как видно в css, при установке верхних полей в% значение рассчитывается в процентах всегда относительно ширины содержащего блока . Как яблоки и апельсины! Если вы не доверяете мне или Mozilla doco, поиграйте с скрипкой выше, отрегулировав ширину контента, и удивитесь.


Теперь, когда CSS был моим хлебом с маслом, я не собирался сдаваться. В то же время, я предпочитаю вещи легкие, поэтому я позаимствовал выводы чешского CSS-гуру и превратил их в рабочую скрипку. Короче говоря, мы создаем таблицу, в которой вертикальное выравнивание установлено в середину:

<table><tr><td>
    <div>
        <p>I am centered like a boss!</p>
    </div>
</td></tr></table>

А затем позиция контента настраивается со старым добрым полем: 0 auto; :

.super-centered {position:absolute; width:100%;height:100%;vertical-align:middle;}
.content {margin:0 auto;width:200px;}​

Работаю на скрипке, как и обещал: http://jsfiddle.net/teDQ2/

Располагаем новые окна по центру экрана в Fluxbox

Как я уже писал неоднократно ранее, моя рабочая среда — это оконный менеджер fluxbox и ничего более, страшноватый на вид, но эффективный по ресурсам и комфорту использования — удобный, то бишь. Сразу после его установки окна вновь запущенных приложений открываются в том месте, где им удобно. А я хочу, чтобы новые окна открывались по центру экрана. В этой статье я поделюсь своим рецептом центровки окон в Fluxbox.


За расположение окон в fluxbox отвечает параметр session.screenX.windowPlacement в файле
~/.fluxbox/init. У меня он выглядит так:
session.screen0.windowPlacement:	RowMinOverlapPlacement

Возможные значения этого параметра таковы:

  • RowSmartPlacement: попытаться разместить окна упорядоченным построчно без перекрытия друг другом.
  • ColSmartPlacement: окна будут пытаться размещаться в столбцы, не перекрывая друг друга.
  • CascadePlacement: классическое «окна каскадом», т.е. друг поверх друга, с небольшим смещением, чтобы было видно заголовок.
  • UnderMousePlacement: новое окно откроется под курсором мыши.

Опции «размещать по центру экрана» не предусмотрено, но для этих целей мы можем использовать специальный конфигурационный файл ~/.fluxbox/apps. В него записываются правила для окон в зависимости от заголовка окна, класса окна программы и других параметров. Используя эти правила, можно привязать конкретную программу к конкретному рабочему столу, например, все мессенджеры открывать на рабочем столе два. Обожаю fluxbox. А также можно указать расположение окон. Чтобы отцентровать новые окна, надо всего лишь добавить в файл apps следующие строчки:

[app] (name!=gimp)
  [Position]	(WINCENTER)	{0 0}
[end]

После перезапуска fluxbox будет размещать все окна по центру, кроме Gimp — я использую Gimp 2.6, и у него все окна с тулбарами оказываются в центре экрана, что неудобно лично мне. Если нужно, чтобы вообще все окна без исключения размещались по центру, сделаем так:

[app] (name=.*)
  [Position]	(WINCENTER)	{0 0}
[end]

Вот и всё. Перезапускаем fluxbox или просто перечитываем его настройки, и вот результат:

💡Узнавайте о новых статьях быстрее. Подпишитесь на наши каналы в Telegram и Twitter.

Поделиться этой статьёй:

Вы здесь: Главная страница » Linux » Располагаем новые окна по центру экрана в Fluxbox

CSS: элемент в центре — dr.Brain

Эта статья будет полезна для тех, кто только начинает свой путь в веб-разработке. Выравнивание элемента по центру — достаточно распространенная задача, но каждый из нас все равно когда-то испытывал связанные с этим затруднения и искал оптимальные способы выравнивания по центру одного блока относительно другого c помощью Google или Stackoverflow. Несомненно, это простая задача. Однако, наличие большого количества элементов и стилей зачастую приводит к обидным ошибкам.

Ниже мы разберем несколько способов выравнивания блока по центру.

Text-align

Метод text-align: center, пожалуй самый распространенный. Обычно он используется для горизонтального выравнивания по центру текста. Кроме того, он успешно используется и для div.

Как это делается?
  1. вокруг элемента, который нужно выровнять по центру, создайте родительский блок (обычно он называется wrapper или container),
  2. задайте для этого (родительского) элемента CSS-свойство text-align: center,
  3. для выравниваемого элемента создайте свойство display: inline-block.

В примере для синего квадрата есть блок-обертка blue-square-container, для которого определено выравнивание текста по центру text-align: center, а для самого квадрата есть свойство display: inline-block.

Следует обратить внимание на то, что по умолчанию для свойства display div получает значение block и поэтому занимает всю доступную ширину 100% и не выравнивается по правилам строчных элементов.

В свою очередь для inline-block элемента:

  1. ширина определяется содержимым или установленным фиксированным значением,
  2. выравнивание относительно родительского блока происходит по правилам, установленным для строчных элементов.

Margin: auto

Другой распространенный способ центрирования блока по горизонтали связан с автовырвниванием левого и правого внешних отступов (например: margin: 0 auto). В этом случае не имеет значения: есть ли родительский элеменет и что с ним происходит.

Мы просто применяем margin: 0 auto к желтому блоку, и это будет работать, если у выравниваемого элемента есть фиксированная ширина.

margin: 0 auto — короткая запись CSS-свойств, определяющая верхний и нижний внешние отступы равными 0, и автоматическое определение ширины для левого и правого внешних отступов.

Важно, чтобы для выравниваемого элемента была установлена фиксированная ширина (в нашем случае для желтого квадрата width: 100px), без нее браузер не сможет рассчитать значения правого и левого внешних отступов, чтобы установить элемент по центру.

Вместо 0 можно установить любые необходимые значения для верхнего и нижнего внешних отступов.

Еще один интересный прием — установить значение auto только для margin-left или только для margin-right, что позволит сместить элемент, соответственно, вправо или влево (попробуйте).

Абсолютное позиционирование

Элемент с абсолютным позиционированием можно разместить в любом месте страницы, но с одной особенностью.

Элемет с абсолютным позиционированием выпадает из потока страницы. То есть остальные элементы страницы ведут себя так, будто абсолютно позиционированного элемента вовсе не существует.

Почему это важно?

Потому, что при некорректном использовании данного свойства, можно спровоцировать наложение элементов.

Если мы хотим просто разместить блок по центру, как в двух предыдущих примерах, нужно выполнить три действия:

  1. установить элементу свойство position: absolute,
  2. применить свойство left: 50%,
  3. установить margin-left равным половине ширины элемента с отрицательным значением.

В данном случае, для этого примера создан зеленый квадрат с такими же размерами, как и в остальных случаях, то есть ширина равна 100px.

Свойства position: absolute и left: 50% указывают браузеру на необходимость сместить элемент на 50% влево. Но в этом случае на отметке 50% будет находиться левый край центрируемого элемента, а не его середина.

Наконец, для того, чтобы выровнять элемент по центру, мы смещаем его влево на половину ширины, за счет margin-left с отрицательным значением.

Следует помнить, что расчет положения элемента с абсолютным позиционированием осуществляется относительно любого из родительских элементов с установленным свойством “position: relative” или относительно страницы при их отсутствии.

Transform/translate

До сих пор мы изучали методы выравнивания элементов по горизонтали. Но что делать, если элемент должен находиться точно в центре страницы (как по горизонтали, так и по вертикали).

Проделаем это с красным квадратом из второго примера (смотри выше).

Хотя мы все еще применяем абсолютное позиционирование и margin-left: 50%, появляются и два новых CSS-свойства.

Устанавливая верхний внешний отступ равным 50%: margin-top: 50%, мы смещаем верхний край элемента к центру. Но, аналогично предыдующему примеру, в центре по вертикали оказывается верхний край элемента, а не его середина.

Вот почему нам нужно еще одно свойство, которое называется transform

С помощью transform можно делать разные крутые штуки, в том числе: смещение, ротацию, масштабирование. Но в данном случае нас интересует именно смещение (translate).

Создаем для центрируемого элемента свойство transform: translate(-50%, -50%), и…

Наш красный квадрат находится в центре как по горизонтали, так и по вертикали страницы.

Этот метод часто используется в адаптивной верстке и не требует определения фиксированных размеров элемента, как в примере с абсолютным позиционированием.

Flexbox

Flexbox — одна из популярных моделей позиционирования и выравнивания элементов на странице.

Если Вы не знакомы с flexbox, воспользуйтесь Flexbox Froggy — это увлекательный и веселый интерактивный способ изучения всех возможностей модели flexbox.

Для того, чтобы разместить элемент в центре (по горизонтали и вертикали) с помощью flexbox, нужно выполнить следующие действия:

  1. HTML, body и родительский контейнер должны иметь высоту 100%,
  2. для родителського контейнера нужно установить display: flex,
  3. так же для родительского контейнера нужно установить align-items: center,
  4. еще для родительского контейнера нужно установить justify-content: center.

Устанавливая display: flex, мы создаем flex-контейнер.

align-items: center определяет вертикальное выравнивание всех дочерних элементов по центру родительского.

justify-content: center по действию подобен предыдущему свойству, но работает в другом направлении — горизонтальном.

Этот метод хорош тем, что отлично подходит для адаптивной верстки и не требует вычисления внешних отступов.


Спасибо за внимание.


Перевод статьи Stephen Sun “How to center things with style in CSS “.

Как центрировать плавающие блоки в контейнере, как центрировать плавающие блоки

Плавающие блоки в центре страницы

Div в центре экрана

В CSS макеты на основе плавающих элементов не очень гибкие, однако центрировать их несколько сложнее.

Можно ли центрировать плавающие элементы?

Плавающий div по центру

Это старый вопрос. Вы можете перемещать влево или вправо, но в макете CSS нет возможности перемещать центр.

Размещение элемента DIV в центре экрана

Решить эту проблему несложно.

маржа: 0 авто;

В приведенном выше коде указано, что верхнее поле и нижнее поле установлены на 0, а левое поле и правое поле установлены на авто (автоматически). Здесь автоматические левое и правое поля выталкивают элемент в центр его контейнера.

Как отобразить div в центре экрана

Из рисунка выше вы можете понять, как он отображается в центре экрана.

маржа: 0 авто;

равно

маржа 0 авто 0 авто;

или можно написать так:

margin-top: 0; маржа-право: авто; нижнее поле: 0; маржа слева: авто;

В следующем исходном коде показано, как центрировать Div в середине браузера.

Двухколоночная раскладка Div в центре экрана

Центральные плавающие блоки в контейнере


Исходный код

Положение Div Точно по центру экрана

Центр div на странице по вертикали, центральный div на странице по горизонтали

Точно по центру означает, что Div горизонтально и практически в центре экрана.


Исходный код

Горизонтальные Div в центре браузера

Показать div в центре экрана


Исходный код

Трехколоночная раскладка Div в центре экрана

Поместите div в центр экрана


Исходный код

Абсолютные центральные изображения с CSS

Вот методика того, как вы можете позиционировать элемент по центру по горизонтали и вертикали в CSS.

Центрировать изображения по горизонтали

Чтобы центрировать что-либо по горизонтали в CSS, довольно просто, все, что вам нужно сделать, это установить ширину элемента и применить к изображению автоматические margin-left и margin-right. Браузер определит точное поле как для правой, так и для левой стороны изображения. Это поместит изображение в центр родительского элемента, просто используя свойства ширины и поля.

 Center Images 
 img {
     ширина: 250 пикселей;
     маржа: 0 авто;
} 

Центрировать изображения по горизонтали и вертикали

Установить изображение по центру по горизонтали очень просто, вам просто нужно установить автоматический режим для левого и правого поля.Но чтобы установить изображение по вертикали и горизонтали, вам нужно установить поля сверху и слева от элемента.

Следующая техника — это то, что вы можете использовать для отображения всплывающего окна, чтобы показать галерею изображений в центре экрана.

В этом примере изображение будет центрировано с шириной 250 пикселей, сначала для установки абсолютного позиционирования изображения, а также для свойства top и left равными 50%. Это поместит изображение в середину экрана, но изображение не будет точно по центру.

 img {
   высота: 250 пикселей;
   осталось: 50%;
   позиция: абсолютная;
   верх: 50%;
   ширина: 250 пикселей;
} 

Верхний левый угол изображения будет точным центром экрана, чтобы переместить эту точку в центр изображения, нам нужно переместить изображение на половину его ширины и на половину его высоты. Чтобы переместить изображение на половину его ширины и половину его высоты, вам нужно добавить верхний край, который имеет отрицательную половину высоты изображения, и левый край, который имеет отрицательную половину ширины изображения.

 img {
   высота: 250 пикселей;
   осталось: 50%;
   margin-top: -125px;
   маржа слева: -125 пикселей;
   позиция: абсолютная;
   верх: 50%;
   ширина: 250 пикселей;
} 

Центральная кнопка CSS

В этом руководстве объясняется, как центрировать кнопку CSS .

Центральная кнопка CSS

Основная цель CSS (каскадных таблиц стилей) — предоставить лучший стиль для веб-страницы HTML. Используя CSS, вы можете указать расположение всех элементов страницы.Вы можете выравнивать элементы как по горизонтали, так и по вертикали. Кнопка CSS должна быть выровнена по центру, если вы хотите, чтобы она располагалась по центру внутри div или в центре веб-страницы.

Вы можете выровнять кнопку CSS по центру, используя следующий метод:

1. Поместив свойство text-align тега body в центр (text-align: center)

В этом примере мы используем свойство `text-align` center в теге , поэтому все внутри тега будет автоматически выровнено по центру .

  


     Кнопка выравнивания по центру 
    <стиль>
        тело {
            выравнивание текста: центр;
        }
    


    

  

Код запуска

Выход

2. Установив свойство

text-align родительского тега div на center ( text-align: center )

В этом примере ниже мы используем `text-align` свойство center в теге

с классом (button-container-div), поэтому все внутри этого
будет автоматически выровнено по центру. .

  



    
     Кнопка выравнивания по центру 
    <стиль>
        .button-container-div {
            выравнивание текста: центр;
            граница: сплошной коралл 1px;
            высота: 40vh;
            ширина: 50ввт;
        }
    


    

Код запуска

Выход

3.Отцентрируйте кнопку CSS с помощью поля

, автоматически (поле : автоматически, )

В этом примере мы используем свойство `margin` auto. Margin auto перемещает div в центр экрана.

  



    
     Кнопка выравнивания по центру 
    <стиль>
        .button-container-div {
            ширина: 300 пикселей;
            высота: 300 пикселей;
            маржа: авто;
        }
    


    

Код запуска

4. Центральная кнопка CSS с фиксированным положением

В этом примере мы задаем поле 50% с левой стороны страницы, а затем мы берем положение : фиксированный , поэтому он будет регулировать положение по центру тела.

  




    
     Кнопка выравнивания по центру 
    <стиль>
        кнопка {
           положение: фиксированное;
           осталось: 50%;
        }
    


    

Код запуска

4.Установив для свойства

display значение flex ( display: flex )

В этом примере мы используем `display`, flex свойство, ` justify-content` и `align-items` для родительского тега

с классом (button-container-div). Кнопка внутри
займет место в центре вертикального и горизонтального положения.

  • Изгиб дисплея переместит его к центру по вертикали.
  • Justify-content перемещает кнопку в центр по горизонтали.
  • Центр выравнивания элементов сохраняет его в центре; в противном случае он будет начинаться с div и идти внизу div.
  




    
     Кнопка выравнивания по центру 
    <стиль>
        .button-container-div {
            ширина: 300 пикселей;
            высота: 300 пикселей;
            граница: 1px solid # ff8899;
            дисплей: гибкий;
            justify-content: center;
            align-items: center;
        }
    


    

Код запуска

Выход

 

3.Установив свойство

display на сетку (отображение : сетка )

В этом примере мы используем свойство сетки `display` в теге

с классом (button-container-div) . Кнопка внутри
займет место в центре вертикального и горизонтального положения.

  


    
     Кнопка выравнивания по центру 
    <стиль>
        .button-container-div {
            ширина: 300 пикселей;
            высота: 300 пикселей;
            граница: 1px solid # ff8899;
            дисплей: сетка;
        }
        кнопка {
            цвет фона: малиновый;
            цвет: #fff;
            граница: сплошная 1px;
            отступ: 10 пикселей;
            ширина: 100 пикселей;
            наброски: нет;
            маржа: авто;
        }
    


    

Код запуска

Выход

CSS Вертикальное выравнивание для всех (включая чайники)

«Вертикальное выравнивание CSS держит меня в напряжении!»

Ровно в 9 утра.Дождливый понедельник смыл воскресенье. Я почувствовал тяжесть серой недели работы впереди, когда стряхнул свои заметки для сложного случая переменных CSS. Я не мог дышать, пока в офис не ворвался бородатый, крупный мужчина с боевым носом. Он был в ярости. И он был моим коллегой. Похоже, он не спал с момента анонса CSS3. Может быть, дело было в его бледном цвете лица, но я знал, что у этого парня были всевозможные ночные проблемы.

«Куда спешить, приятель?»

Он бросил свой ноутбук мне на стол, чтобы показать мне экран, заполненный пульсирующими лягушками и пустыми листьями кувшинок.

«У меня есть для вас хороший. У меня проблемы с центрированием моего контента. Это плохо, очень плохо. Я не мог уснуть. И знаете что? Все борются с этим, это может быть серьезным случаем. — подумайте о коллективном иске и всем остальном ».

Глупый наркотик не знал, во что ввязывается. Центрирование контента по вертикали было огромным беспорядком, заваленным бюрократизмом. И он пошел вверх, вплоть до IE6. Но мне было жаль бедного ублюдка. Что я могу сказать; Я любитель слезливых историй.

«Успокойтесь, Рикардо. Алекс Сантос, эсквайр, мастер CSS, к вашим услугам».

. . .

Это могло быть не совсем так. Может быть, просто возможно, я приукрасил сказку.

Видите ли, мой коллега Рикардо — крупный бородатый парень — самопровозглашенный манекен CSS. Однажды он сказал мне, что все еще использует

в своей разметке. С точки зрения мастерства вертикального выравнивания CSS он пустышка.

В любом случае, сделать ваш контент правильно выровненным, красивым и в принципе потрясающим — непростая задача в CSS.Я видел достаточно людей, которые боролись с этим, и продолжаю замечать некоторые «критические» ошибки, когда дело касается настоящего адаптивного дизайна.

Но не бойтесь: если вы боролись с вертикальным выравниванием CSS — как мой коллега, возможно, — вы попали в нужное место.

Давайте поговорим о свойстве CSS Vertical Align

Когда я начал заниматься фронтенд-разработкой, у меня были небольшие проблемы с этим свойством. Я подумал, что его следует использовать как классическое свойство text-align.О, если бы это было так просто …

Свойство CSS вертикального выравнивания гладко работает с таблицами, но не с div или любыми другими элементами. Когда вы используете его в div, он выравнивает элемент вместе с другими div, а не содержимое — это то, что мы обычно хотим). Это работает только с дисплеем : inline-block; .

Вот пример:

См. Pen 1 # Example_OutSystems Experts — Vertical-align on divs от Александра Сантоса (@alexandre_santos) на CodePen.

Мы хотим центрировать контент, а не сам Div!

У вас есть два подхода. Если у вас есть только некоторые элементы div с текстом — например, панель навигации — вы можете использовать свойство line-height — это означает, что вам нужно знать высоту элемента, но вам не нужно устанавливать высоту. Таким образом, ваш текст всегда будет по центру.

Однако у этого подхода есть загвоздка. Если в вашем тексте более одной строки, высота строки будет умножена на количество имеющихся строк.Это, вероятно, оставит вас с уродливой страницей в ваших руках, а этого никто не хочет.

Взгляните на этот пример:

См. Pen 2 # Example_OutSystems Experts — Navbar with line-height от Александра Сантоса (@alexandre_santos) на CodePen.

Если контент, который вы хотите центрировать, состоит из нескольких строк, лучше всего использовать таблицы div. Вы можете использовать настоящие таблицы, но это семантически неверно. Кроме того, если вам нужны перерывы для адаптивных целей, лучше использовать элементы div.

Для того, чтобы это работало, у вас должен быть родительский контейнер с display: table; , и внутри этого контейнера у вас будет количество столбцов, которые вы хотите выровнять по центру, с display: table-cell; vertical-align: middle; ) свойство.

Давайте посмотрим на пример:

См. Pen 3 # Example_OutSystems Experts — Выравнивание ячеек таблицы по вертикали Александра Сантоса (@alexandre_santos) на CodePen.

Почему это работает с макетом таблицы, а не с элементами div? Потому что, когда у вас есть таблица, строки имеют одинаковую высоту.Таким образом, когда содержимое ячейки не использует всю доступную высоту, браузер автоматически добавляет вертикальный отступ для центрирования содержимого.

Свойство позиции

Начнем с основ:

  • положение: статическое; — это значение по умолчанию. Элемент отображается в соответствии с порядком HTML.
  • позиция: абсолютная; — используется для определения точной позиции, в которой должен находиться элемент. Эта позиция всегда связана с ближайшим предком в относительной позиции (не статической).Знаете ли вы, что произойдет, если вы не определите точное положение элемента? Вы теряете над этим контроль! Он отображается случайным образом, полностью игнорируя документооборот. По умолчанию он отображается в верхнем левом углу.
  • положение: относительное; — используется для позиционирования элемента относительно его нормального положения (статика). Эта позиция сохраняет порядок потока документа.
  • позиция: фиксированная; — используется для позиционирования элемента относительно окна браузера, чтобы он всегда был виден в области просмотра.

Примечание : Некоторые свойства, такие как top и z-index , работают только в том случае, если элемент имеет позицию (не статичную).

Давайте сделаем наши грязные руки еще грязнее!

Вы хотите выровнять рамку по центру страницы?

Сначала получите элемент с относительным положением и желаемыми размерами. Например: 100% ширины и высоты.

Второй шаг может отличаться в зависимости от ваших целевых браузеров, но вы можете использовать один из двух вариантов:

  • Old school option : Вам нужно знать точный размер коробки, чтобы удалить половину ширины и половину высоты коробки.Как это:

См. Перо 4 # Example_OutSystems Experts — Абсолютное позиционирование с рамкой размера от Александра Сантоса (@alexandre_santos) на CodePen.

  • Классная новая опция CSS3 : добавьте свойство преобразования со значением перевода -50%, и оно всегда будет центрировано. Как это:

См. Перо 5 # Example_OutSystems Experts — Абсолютное позиционирование без рамки от Александра Сантоса (@alexandre_santos) на CodePen.

В принципе, если вы хотите центрировать контент, никогда, (никогда, никогда, никогда!) Не используйте top: 40% или left: 300px .Это отлично работает на ваших тестовых экранах, но не по центру. Не совсем.

Помните фиксированное положение? Вы можете сделать то же самое, что и с абсолютным положением, но вам не нужно относительное положение в родительском элементе — оно всегда будет относительно окна браузера.

CSS Vertical Align Criers: вы слышали о Flexbox?

Вы можете использовать макет flexbox, вариант, о котором мой мальчик Динис писал некоторое время назад. Ах да, это намного лучше, чем любой из других доступных вариантов.С помощью flexbox манипулировать элементами по-разному — это детская игра. Даже Рикардо мог это сделать.

Проблема в том, что вам нужно отказаться от некоторых браузеров, например IE9 и ниже. Отпусти. Отпусти это … не могу больше сдерживаться. (Да, теперь он застрял в вашей голове. Пожалуйста.)

Вот пример того, как центрировать коробку по вертикали:

См. Pen 6 # Example_OutSystems Experts — Макет Flexbox без размера блока от Александра Сантоса (@alexandre_santos) на CodePen.

Используя макет flexbox, вы можете иметь более одного центрированного блока и правильно выровнять его. Но это уже история для другого раза!

А как насчет CSS Grid?

CSS Grid Layout — самая мощная система компоновки, доступная в CSS. Основное отличие от Flexbox заключается в том, что он работает в двухмерной системе, то есть может обрабатывать как столбцы, так и строки, в отличие от Flexbox, который в значительной степени является одномерной системой. По этой причине это может быть подходящим для создания более сложных макетов, таких как шаблон галереи в пользовательском интерфейсе OutSystems.

При этом его можно использовать просто для центрирования элементов в контейнере! Вот пример того, как центрировать коробку по вертикали:

См. Перо CodePen Home 7 # Example_OutSystems Experts — Макет сетки без поля размера, автор Бернардо Кардосо (@BenCardoso) на CodePen.

Подобно Flexbox, этот подход также требует отказа от старых браузеров, хотя поддержка в основных из них совершенно стабильна.

Чтобы узнать больше о CSS Grid, ознакомьтесь с этим полным руководством и некоторыми практическими примерами.

Никаких разрывах вертикального выравнивания CSS

Вертикальное выравнивание во многом похоже на детский шампунь Джонсона: без разрывов. Если вы последуете тому, чему научились с помощью этих нескольких примеров, вы также сможете быстро освоить вертикальное выравнивание.

. . .

Некоторое время спустя я проходил мимо дома Рикардо, но его там не было. Кто-то сказал мне, что он заснул на одной из многих удобных кушеток нашей компании.

Похоже на технический нокаут.

Но когда я посмотрел на экран его ноутбука…

Какого черта он делал? Играть в игры, пока он должен был работать?

Это очень много цветов для понедельника, который начался таким серым.

Ссылки и дополнительная литература


Способ создания программного обеспечения меняется. Будьте на шаг впереди и присоединяйтесь к нам на конференции разработчиков OutSystems — это ваша возможность узнать о последних передовых технологиях OutSystems и о том, как они могут помочь вам построить больше и ускорить вашу карьеру.Узнайте больше и сэкономьте свое место прямо здесь!

CSS Center A Div по горизонтали и вертикали

3 174

Существует несколько способов центрировать HTML-элемент по вертикали и горизонтали относительно его родительского контейнера.

Показать стол

Определите родительский div с именем класса .box.

Дочерний div имеет имя класса.inner-box и внутри него есть элемент изображения.

  

В CSS добавьте свойство display: table в родительский div, который является .box

.

Это повлияет на всю ширину, поэтому также добавьте к ней ширину: 100%.

Внутри .inner-box отцентрируйте тег изображения по горизонтали, используя свойство text-align: center, поскольку это встроенный элемент.

Наконец, добавьте vertical-align: middle к внутреннему элементу div, который перемещается по вертикали в центр своего родительского элемента.

  html, body {
  маржа: 0px;
  высота: 100%;
}
.коробка {
  ширина: 100%;
  высота: 100%;
  дисплей: таблица;
}
.Внутренняя коробка{
  выравнивание текста: центр;
  дисплей: таблица-ячейка;
  вертикальное выравнивание: по центру;
}  

Прокладка

Используя padding, мы можем легко сделать внутренний div вертикально центрированным.

Если вы используете этот подход, не добавляйте свойство высоты к внешнему блоку.

  html, body {
  маржа: 0px;
}

.наружная коробка {
  ширина: 100%;
  отступ: 60 пикселей 0;
  выравнивание текста: центр;
  фон: оранжевый;
  цвет белый;
}

.Внутренняя коробка {
  ширина: 100 пикселей;
  фон: фиолетовый;
  маржа: 0 авто;
  размер шрифта: 2em;

}

  

Дисплей: Flex

Установка гибкости отображения для внешнего контейнера — это самый простой способ расположить его дочерний элемент по центру в обоих направлениях.

  
  html, body {
  высота: 100%;
  маржа: 0;
}

.коробка {
  высота: 100%;
  фон: фиолетовый;

  дисплей: гибкий;
  justify-content: center;
  align-items: center;
}  
имя значение описание
высота 100% Значение 100% растянет элемент .box, чтобы он соответствовал высоте его области просмотра на 100%.

Не забудьте добавить height: 100% к селекторам HTML и body.

дисплей flex Это делает .Элемент box должен быть flexbox, что означает, что мы можем легко упорядочить его дочерние элементы.
flex-direction row По умолчанию для flex-direction установлено row, что означает, что все дочерние элементы расположены рядом друг с другом.
justify-content center Это центрирует дочерние элементы по вертикали и растягивает их, чтобы соответствовать высоте родительского элемента.
align-items center Это будет центрировать .img по горизонтали к его родительскому контейнеру.

Align Content — Tailwind CSS

Start

Используйте content-start для упаковки строк в контейнер напротив начала поперечной оси:

  
1
2
3
4
5

Center

Используйте content-center для упаковки строк в контейнер в центре поперечной оси:

  
1
2
3
4
5

End

Используйте content-end для упаковки строк в контейнер напротив конца поперечной оси:

  
1
2
3
4
5

Пробел между

Используйте content-between для распределения строк в контейнере таким образом, чтобы между каждой строкой оставалось равное количество пробелов:

  
1
2
3
4
5

Пространство вокруг

Используйте вокруг содержимого для распределения строк в контейнере таким образом, чтобы вокруг каждой строки оставалось равное пространство:

  
1
2
3
4
5

Равномерное пространство

Используйте равномерно по содержимому для распределения строк в контейнере таким образом, чтобы вокруг каждого элемента оставалось равное пространство, но также с учетом удвоения пространства, которое вы обычно видите между каждым элементом. элемент при использовании content-around :

  
1
2
3
4
5

Адаптивный

Чтобы контролировать выравнивание гибкого содержимого в определенной точке останова, добавьте префикс {screen}: к любому существующему служебному классу.Например, используйте md: content-around , чтобы применить утилиту content-around только для средних размеров экрана и выше.

  

Для получения дополнительной информации о функциях адаптивного дизайна Tailwind ознакомьтесь с документацией по адаптивному дизайну.

Настройка

Варианты

По умолчанию для утилит align-content генерируются только адаптивные варианты.

Вы можете контролировать, какие варианты генерируются для утилит align-content, изменив свойство alignContent в разделе вариантов попутного ветра .config.js файл.

Например, эта конфигурация также будет генерировать варианты наведения и фокусировки:

 
  module.exports = {
    варианты: {
      продлевать: {
        
+ alignContent: ['hover', 'focus'],
      }
    }
  }  

Если вы не планируете использовать утилиты align-content в своем проекте, вы можете полностью отключить их, установив для свойства alignContent значение false в разделе corePlugins вашего файла конфигурации:

 
  модуль.export = {
    corePlugins: {
      
+ alignContent: false,
    }
  }  

Центрировать таблицу с помощью CSS

Старый способ центрировать стол был простым:

  
    ...
  

Однако атрибут «align» устарел в пользу CSS (каскадных таблиц стилей), и это хорошо. Однако не так очевидно, как центрировать таблицу с помощью CSS.

Может показаться очевидным способ использования CSS «text-align: center;» где-то, может быть, как одно из этих:

  <таблица>
 

ИЛИ ЖЕ

  
<таблица> ...

ИЛИ, если ты действительно отчаялся,

  
    <таблица>
      ...
    
  
 

Ничего из этого не сработает. Сама таблица будет выровнена по левому краю, но все содержимое ячеек таблицы будет по центру.

Почему? Поскольку «выравнивание текста» применяется к встроенному контенту, а не к элементу уровня блока, например, «таблица».

Способ 1

Чтобы центрировать таблицу, вам нужно установить поля, например:

  table.center {
    маржа слева: авто;
    маржа-право: авто;
  }
 

А потом сделайте так:

  <таблица>
    ...
  
 

На этом этапе Mozilla и Opera займут ваше место. Однако Internet Explorer 5.5 и выше требует, чтобы вы также добавили это в свой CSS:

  тело {выравнивание текста: центр;}
 

Способ 2

Если вы хотите, чтобы ваша таблица имела определенную процентную ширину, вы можете сделать это:

  table # table1 {
    ширина: 70%;
    маржа слева: 15%;
    маржа-право: 15%;
  }
 

А затем в своем HTML / XHTML вы должны сделать это:

  <таблица>
    ...
  
 

Обратите внимание, что я использовал идентификатор для описания таблицы. Вы можете использовать идентификатор только один раз на странице. Если бы у вас было много таблиц на странице, которые должны быть одинаковой ширины и центрированы, вы бы сделали это в своем CSS:

  table.center {
    ширина: 70%;
    маржа слева: 15%;
    маржа-право: 15%;
  }
 

И это в вашем HTML:

  <таблица>
    ...
  
 
  <таблица>
    ...
  
 

Способ 3

Если вы хотите, чтобы ваша таблица имела фиксированную ширину, определите свой CSS следующим образом:

  div.container {
    ширина: 98%;
    маржа: 1%;
  }
  table # table1 {
    выравнивание текста: центр;
    маржа слева: авто;
    маржа-право: авто;
    ширина: 100 пикселей;
  }
  tr, td {выравнивание текста: слева;}
 

Установите ширину: 100 пикселей на любую ширину, которая вам нужна.