Содержание

CSS-как центрировать div переменной высоты и ширины в центре другого div?

Я сталкивался с некоторыми методами центрирования div внутри div, но они обычно требуют, чтобы элемент был центрирован, чтобы иметь фиксированную ширину и высоту. Есть ли способ сделать это, если внутренний div, который будет центрирован, будет иметь переменную ширину и высоту (пример: центрирование изображения внутри кадра фиксированного размера, и изображение может иметь переменную width/height)

css

Поделиться

Источник


Extrakun    

27 октября 2010 в 13:50

5 ответов




2

горизонтальное центрирование можно выполнить с помощью CSS:

#containerDiv {
  text-align:center;
}

#innerDiv {
  margin: 0 auto;
  text-align: left;
}

Для вертикального центрирования я использую Javascript, если containerDiv не имеет фиксированной высоты.

Поделиться


Steve Claridge    

27 октября 2010 в 14:03



1

Единственный способ центрировать переменную ширину во всех браузерах (о котором я знаю) — это

<table align="center" cellpadding="0" cellspacing="0"><tr><td><div>This div is variable width and is centered.</div></td></tr></table>

или JavaScript

Что касается центральной горизонтали, то это заставит вас использовать JavaScript (я думаю)

Поделиться


Bryan Field    

27 октября 2010 в 13:53



1

IE нуждается в «text-align: center» на элементе верхнего уровня.

Например, ваш элемент тела имеет «text-align: center»,
and your container has «margin: 0 auto».
Тогда IE будет центрировать его.

Вы можете установить «text-align» влево на вашем контейнере, если не хотите, чтобы его содержимое было центрировано.

Поделиться


Emilie    

10 января 2012 в 21:17


  • Центрировать div вертикально?

    Я создаю адаптивный веб-сайт, и у меня есть div (имя ‘wrapper’), который я хочу всегда быть в центре страницы. Я понял, как центрировать его по горизонтали, потому что у меня есть определенный процент ширины. Как бы я центрировал это вертикально, если бы у меня не было установленного процента…

  • Центральный div с переменной шириной, поверх другого содержимого

    Как мне горизонтально центрировать элемент переменной ширины, который должен быть поверх других элементов? Принятый здесь Ответ простой способ центрировать DIVS переменной ширины в CSS хорош для центрирования переменной ширины, но он толкает все остальное вниз: Обычно я так и делаю:…



0

Центрирование ширины easy…you, вероятно, уже известно об этом, но просто установите левое и правое поля в положение auto. Что касается высоты, то, к сожалению, я видел только странные обходные пути позиционирования. Можно было бы подумать, что они сделают такую же маржу для top/bottom,, но, увы, нет. Я постараюсь найти ссылку на обходные пути.

<div>
    <div>&nbsp;</div>
</div>

EDIT: найдена ссылка, которая может помочь в вертикальной части:

http://www.jakpsatweb.cz/css/css-вертикаль-центр-solution.html

Поделиться


Kevin Nelson    

27 октября 2010 в 13:58


Поделиться


acme    

23 февраля 2012 в 12:53


Похожие вопросы:

Вертикальное центрирование div внутри другого div

Я хочу центрировать div, который добавляется внутри другого div. <div id=outerDiv> <div id=innerDiv> </div> </div> Это CSS, который я сейчас использую. #outerDiv{ width:…

Как я могу сделать div горизонтально центрировать себя в другом div?

Возможный Дубликат : Как центрировать горизонтально div внутри родительского div У меня есть следующее: <div id=a> <div id=b>abc</div> </div> Мой первый div a стилизован под…

Как центрировать изображение переменной ширины в DIV на странице?

У меня есть изображение переменной ширины , которое я хотел бы центрировать в контейнере div , который будет центрирован на странице. Если я установлю ширину на div и дам ему margin: 0 auto , он…

как центрировать вертикально и горизонтально изображение на плавающем div, не зная ширины или высоты изображения?

Хорошие браузеры вне уравнения, он должен быть действителен на IE 8 и sup; Как центрировать изображение на плавающем div, не зная ширины или высоты изображения ? Изображение семантически релевантно,…

Как центрировать div на странице? (Высота И Ширина)?

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

Центрировать div вертикально?

Я создаю адаптивный веб-сайт, и у меня есть div (имя ‘wrapper’), который я хочу всегда быть в центре страницы. Я понял, как центрировать его по горизонтали, потому что у меня есть определенный…

Центральный div с переменной шириной, поверх другого содержимого

Как мне горизонтально центрировать элемент переменной ширины, который должен быть поверх других элементов? Принятый здесь Ответ простой способ центрировать DIVS переменной ширины в CSS хорош для…

Можно ли центрировать содержимое переменной ширины, автоматически переполняя div чисто из CSS?

Я прочитал несколько подобных вопросов, но ни один из них не относится к этому делу. Там есть div, который содержит ячейки. Каждая ячейка имеет одинаковый размер. Div должен быть переменной ширины и…

Есть ли способ центрировать div без заданной ширины или высоты?

У меня есть следующее HTML <div class=modal_overlay> <div class=modal_window> Content </div> </div> и следующее CSS div.modal_overlay { display: none; height: 100%; width:…

Как центрировать div по горизонтали без ширины и поля

Как центрировать div по горизонтали без ширины в браузерах старой версии, которые не поддерживают свойство display:inline-block. Как центрировать мой .container div по горизонтали без ширины <div…

Выравнивание элементов во 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 заполнит всё доступное свободное место по своей оси. Тем же образом cработает 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 (Макет Сетки)

Как центрировать контент по вертикали и по горизонтали с помощью Flexbox

  1. Snippets
  2. CSS
  3. Как центрировать контент по вертикали и по горизонтали с помощью Flexbox

Разработчики могут уверять вас, что центрирование контента одно из самых сложных вещей в CSS макетах. CSS Flexbox позволяет еще лучше контролировать выравнивание HTML элементов.

Сейчас мы пошагово покажем, как легко центрировать контент по вертикали и горизонтали.

Давайте поработаем с помощью этого примера:

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      #big-box{
      width: 200px;
      height: 200px;
      background-color: #666666;
      }
      #small-box{
      width: 100px;
      height: 100px;
      background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h3>Центрирование контента</h3>
    <div>
      <div></div>
    </div>
  </body>
</html>

Попробуйте сами!

Здесь имеет два div элемента. Наша задача — центрировать «small-box» id внутри «bix-box» id.

  1. Сначала мы используем свойство width, чтобы установить width для двух блоков. Установите необходимый размер.
  2. Потом установите высоту блоков, используя свойство height.
  3. Установите выбранные вами цвета для div элементов, используя свойство background-color.
#big-box{
width: 200px;
height: 200px;
background-color: #666666;
}
#small-box{
width: 100px;
height: 100px;
background-color: #8ebf42;
}
  1. Следующим шагом укажите макет с помощью свойства display. Чтобы использовать Flexbox, установите display: flex. (display: -Webkit-flex;)
#big-box{
width: 200px;
height: 200px;
background-color: #666666;
display: flex;
display: -webkit-flex;
}

Значение flex должно использоваться вместе с расширением -webkit- для Safari, Google Chrome и Opera.

Ничто не изменится, если попробуйте этот код. Выполните следующие шаги!

  1. Добавьте свойство align-items. Это свойство указывает вертикальное выравнивание контента внутри флекс-контейнера. Необходимо установить свойство align-items в значение «center», чтобы по вертикали центрировать контент.
#big-box{
width: 200px;
height: 200px;
background-color: #666666;
display: flex;
display: -webkit-flex;
align-items: center;
-webkit-align-items: center;
}

Сейчас примените код и увидите, что «small-box» центрирован относительно вертикальной оси.

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

  1. Необходимо применить свойство justify-content, которое выравнивает контент по горизонтали. Устанавливаем свойство justify-content в значение «center»:
#big-box{
width: 200px;
height: 200px;
background-color: #666666;
display: flex;
align-items: center;
justify-content: center;
-webkit-align-items: center;
}

Мы достигли нашей цели!

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      #big-box{
      width: 200px;
      height: 200px;
      background-color: #666666;
      display: flex;
      align-items: center;
      justify-content: center;
      -webkit-align-items: center;
      }
      #small-box{
      width: 100px;
      height: 100px;
      background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h3>Центрирование контента</h3>
    <div>
      <div></div>
    </div>
  </body>
</html>

Попробуйте сами!

-Webkit- для Safari, Google Chrome и Opera (новые версии) используется вместе со свойством align-items.

Рассмотрим другой пример:

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .flexbox-container {
      background: #cccccc;
      display: flex;
      align-items: center;
      -webkit-align-items: center;
      justify-content: center;
      height: auto;
      margin: 0;
      min-height: 500px;
      }
      .flexbox-item {
      max-height: 50%;
      background: #666666;
      font-size: 15px;
      }
      .fixed {
      flex: none;
      max-width: 50%;
      }
      .box {
      width: 100%;
      padding: 1em;
      background: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h3>Центрирование контента</h3>
    <div>
      <div>
        <div>
          <h3>Центрирован с помощью Flexbox</h3>
          <p contenteditable="true">Этот блок центрирован и по вертикали и по горизонтали. </p>
        </div>
      </div>
    </div>
  </body>
</html>

Попробуйте сами!

Блок остается центрированным, даже если текст меняется.

Приносим извинения за это

Как мы можем улучшить это?

Спасибо за ваш отзыв!

Спасибо за ваш отзыв!

Считаете ли это полезным? Да Нет


Похожие статьи

Работающие методы центрирования CSS | {dev-tricks}

# Горизонтальное центрирование

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

 

1. Центрируемый элемент строчный (inline):

Можно назначить родительскому контейнеру свойство text-align:center. Ниже пример:

See the Pen wzjPWN by Ruslan (@rkaliev) on CodePen.0

2. Центрируемый элемент блочный (block):

В этом случае задаем ему ширину (иначе он займёт всю ширину родительского контейнера и не будет нуждаться в центрированиии)  и автоматическую установку левого и правого полей:   margin-left: auto и  margin-right: auto. Часто используют такую сокращённую запись: margin: 0 auto;  Этот способ работает вне  зависимо от ширины центрируемого блочного элемента и его родителя. Ниже пример:

See the Pen BLxmLr by Ruslan (@rkaliev) on CodePen.0

3. Несколько  блочных элементов  в ряду:

Можно указать для них тип отображения inline-block или же применить flexbox. Ниже пример:

See the Pen YGLEpa by Ruslan (@rkaliev) on CodePen.0

# Вертикальное центрирование

Что же касается текста, то многие для центрирования по вертикали начинают  использовать свойство vertical-align, что вполне логично.  Но, к сожалению, оно не действует в блочных элементах (например,в  параграфах (p) внутри элемента (div)).  Но есть другие методы центрирования блочных элементов, выбор которых зависит от того, что центрируется по отношению к внешнему контейнеру.

 

1. CSS метод со свойствами таблиц

Свойство vertical-align отлично действует для ячеек таблиц.  Представим родительский элемент как таблицу, а дочерний как ячейку и применим свойство  vertical-align: middle для вертикального центрирования содержанияВ итоге контент в элементе-потомке отцентрируется по вертикали. Рассмотрим наш пример:

 

HTML:

<div class=“parent”>

    <div class=“child”>Какой-то Текст…</div>

</div>

 

CSS:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

.parent {    

    display: table; // Представили родительский элемент как таблицу

    width: 200px;

   height: 200px;    

    background: #f06d06;    

    text-align: center;    

    color: #fff;    

    font-size: 22px;

}

  

.child {     

    display: table-cell; // дочерний – как ячейку      

    vertical-align: middle; // отцентрировали содержимое вертикально  

}

 

 

2. Центрирование с помощью внутренних отступов (если элемент строчный )

Если элемент помещается в одну строку, то его можно отцентрировать с помощью одинаковых верхних и нижних внутренних отступов (padding).

CSS:

.link  {    

    padding-top: 30px;

    padding-bottom: 30px;

}

Пример:

See the Pen JRvOEJ by Ruslan (@rkaliev) on CodePen.0

3.  Использование line-height

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

CSS:

.center-text-trick {

    height: 100px;

    line-height: 100px;

    white-space: nowrap;

}

Пример:

See the Pen ALabqL by Ruslan (@rkaliev) on CodePen.0

4. Абсолютное позиционирование (если элемент блочный)

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

CSS:

.parent { position: relative; }

.child {

    position: absolute;

    top: 50%;

    height: 100px;

    margin-top: -50px; /* учитывайте поля и границы, если не используете box-sizing: border-box; */

}

Пример:

See the Pen jrxamO by Ruslan (@rkaliev) on CodePen.0

Если вам не известна высота центрируемого элемента, то решение тоже есть. Поднять вверх на половину его высоты после того, как сдвинули его наполовину вниз:

CSS:

.parent { position: relative; }

.child {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

}

А вот и пример:

See the Pen LRmOyO by Ruslan (@rkaliev) on CodePen.0

5. Использование  flexbox (если элемент блочный)

Используя flexbox, можно всё сделать проще с меньшим количеством кода.

CSS:

.parent {

    display: flex;

     flex-direction: column;

     justify-content: center;

}

А вот и пример:

See the Pen mALqmG by Ruslan (@rkaliev) on CodePen.0

 

# Горизонтальное и вертикальное центрирование

1.  Фиксированная высота и ширина элемента

Если у элемента фиксированная высота и ширина, то используем отступы с отрицательными значениями, равными половине высоты и ширины элемента после того, как для него было прописано абсолютное позиционирование в точке 50%/50%, это и отцентрирует элемент внутри родителя. Способ хорошо поддерживается браузерами.

CSS:

1

2

3

4

5

6

7

8

9

10

11

12

13

.parent { position: relative;}

.child {

    width: 300px;

    height: 100px;

    padding: 20px;

    position: absolute;

    top: 50%;

    left: 50%;

    margin: -70px 0 0 -170px;

}

Пример:

See the Pen yajPXY by Ruslan (@rkaliev) on CodePen.0

2.  Высота и ширина элемента неизвестны

Если вам неизвестны ширина или высота центрируемого элемента, то можно воспользоваться свойством transform и отрицательным значением translate по 50% в обеих направлениях (вычисляется от текущей ширины/высоты элемента):

CSS:

.child {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

}

 

3. Flexbox снова приходит на помощь

Для центрирования горизонтально и вертикально подойдет также flexbox:

CSS:

.parent {

    display: flex;

    justify-content: center;

    align-items: center;

}

 

See the Pen vXjWkA by Ruslan (@rkaliev) on CodePen.0

Источник: css-tricks.com

Центрирование в блоке с неизвестными размерами — Блог Андрея Мотошина

Перевод статьи Криса Койера Centering in the Unknown.

Когда в верстке дело доходит до центрирования, то чем больше у вас информации о центрируемом элементе и о его родителе, тем легче. Так как же быть, если вы ничего о них не знаете? Даже не смотря на это, задачу можно решить.

Не особо сложно: известны размеры элемента

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

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

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

Сложнее: неизвестны размеры элемента

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

Самый простой способ центрирования в этом случае — таблицы:

<table>
  <tr>
     <td>
          Неизвестный центрируемый элемент.
     </td>
  </tr>
</table>

Если вы заботитесь о семантике, то можете привести ее в соответствие с имеющимся содержимым.

<div>
   <div>
       Неизвестный центрируемый элемент.
   </div>
</div>

В этом случае получаете тот же результат, как и с помощью таблиц:

.something-semantic {
   display: table;
   width: 100%;
}
.something-else-semantic {
   display: table-cell;
   text-align: center;
   vertical-align: middle;
}

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

Michal Czernow описал мне чрезвычайно интересную альтернативную технику, которая делает то же самое. Если мы создадим внутри родителя невидимый элемент, который занимает 100% высоты, а затем добавим vertical-align: middle этому и центрируемому элементу, то получим тот же результат.

Так что получается, невидимый элемент не должен быть семантичным? Нет, он может быть псевдо-элементом.

/* Родитель может иметь любую ширину и высоту */
.block {
  text-align: center;
}

/* Невидимый элемент, сдвинутый для лучшего центрирования */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Сдвиг */
}

/* Центрируемый элемент
может так же иметь любую ширину и высоту */
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

Демо

Хочу вам сказать, что техника с невидимым элементом лучше, чем предыдущие и должна стать техникой центрирования на века. Но в реальности это почти то же самое, как и трюк с таблицами, который поддерживается всеми современными браузерами и IE 8+. Хоть IE 7 и не поддерживает псевдо-элементы, он так же не поддерживает и CSS-таблицы. Если нужна поддержка IE <= 7, значит пришло время для <table> (или использования несемантичного <span> или чего-то другого для невидимого элемента).

Этот способ — не открытие. Gary Turner писал о нем 5 лет назад. Но я упомянул Michal’а за то, что он использовал псевдо-элементы и сделал этот метод самым семантически верным.

CSS центрирование блочных элементов

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

Как осуществляется при помощи CSS центрирование элементов

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

А ведь вам нужно, чтобы оно располагалось по центру. «Как же сделать при помощи CSS центрирование содержимого по горизонтали?» — возникнет у вас вопрос.

Для этого на нашем видеоуроке будет рассмотрена специальная базовая модель CSS — box-model. Box-model — это модель, которая описывает все блочные элементы в HTML-разметке (все элементы подразделяются на блочные и строчные), на ее основе и будет производиться при помощи CSS центрирование всех блочных элементов

Блочный элемент и его стандартные свойства CSS — margin, border и padding

Стандартный блочный элемент имеет такие свойства, как margin, border и padding.

  • margin — внешние отступы рассматриваемого элемента от соседних элементов.
  • border — рамка этого элемента,
  • padding — его внутренние отступы, т.е. отступы между рамкой и контентом.

Эти свойства и включены в box-model и именно на эту модель вам нужно опираться при построении сетки своего сайта.

Тег <div> как контейнер при CSS центрировании

Самым типичным представителем box-model является тег <div> — контейнер, коробочка для элементов, с помощью которых вы будете создавать какой-то отдельный блок вашего сайта.

На нашем видеоуроке вы познакомитесь с таким понятием, как горизонтальное позиционирование, вы научитесь осуществлять при помощи CSS центрирование ваших блоков по горизонтали. Это делается следующим образом. При фиксированной ширине блока ему задается свойство margin со значением auto.

.container {
width: 1140px;
margin: 0 auto;
}

где 0 — внешние отступы блочного элемента сверху и снизу, а auto — справа и слева. Таким образом, элемент центрируется по горизонтали.

Заключение

Итак, данный видеоурок продвинет вас еще дальше на пути к заветной цели — цели стать классным фронтенд-разработчиком. Ведь дом строится из кирпичиков, а достижение больших целей складывается из достижения малых.

Приятного всем просмотра! Учитесь с удовольствием! Всегда ваш Loftblog.

Рекомендуемые курсы

Как центрировать резиновый блок css

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

Вот девушка в кафе сидит «Вконтакте» со смартфона, рядом обедает бизнесмен и листает на планшете странички сайта поставщика арматуры…

Разные люди, разные интересы, разные размеры мониторов портативных ЭВМ. И наша задача – создать такой интернет-ресурс, который обеспечил бы максимальную адекватность отображения результатов и удобность в использовании.

«Резиновая» верстка уже длительной период времени уверенно держится в тренде наряду с другими методами адаптации отображения содержимого под разрешение клиентского терминала.

Об некоторых алгоритмах этого дивного метода мы и поговорим сегодня.

Постановка задачи

Давайте представим ситуацию – мы работаем над каталогом интеренет-магазина и нам необходимо отверстать визитную карточку товара, на которой размещается изображение этого товара и кнопочка для заказа. Но поскольку наш магазин (допустим, готовой пищи), должен быть доступен всегда и везде, кнопочка «обязана» быть резиновой.

Вот тут у нас и появляется логичный вопрос. Как позиционировать кнопку, если она резиновая? Задать границы 0px auto не получится, ибо размеры блока-кнопки не фиксированы. Строчное представление кнопки тоже нам не подходит, ведь настроить дизайн при таком раскладе становится практически невозможно.

Алгоритм решения задачи

Как говорилось раньше определенные benefits нам принесет блочно-строчный рендеринг элемента. А если говорить по-русски, то мы используем CSS свойство display: inline-block.

Для подробного рассмотрения данного вопроса воспользуемся примером. Создадим html страничку со следующим содержимым.

HTML:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" media="all" type="text/css" href="./style.css">
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div>
	<div>
		<img src="./omar.jpg" alt=" Блюдо с омаров" />
	</div>
	<a href="#">Заказать<span></span></a>
</div>
    </body>
</html>

CSS:

.kartochka{
	text-align: center; /*Выравниваем текст родителя по центру*/
        background: url(./carbon2.png); /*Задаем картинку-бэкграунд*/
        padding: 31px; /*Внутренние отступы родителя*/
        -moz-border-radius: 11px;/*Фаска для мозиллы*/
        border-radius: 11px;/*Фаска для остальных*/
        min-width: 400px;/*Ограничиваем ширину*/
        min-height: 300px; ;/*Ограничиваем высоту*/
 
}
.button{
	display: inline-block;/*Создаем строчно-блоковое отображение*/
	color: red; /*Задаем цвет текста*/
	position: relative; /*Позиционируем*/
	margin: 21px auto 0px auto; /*Отодвигаем от картинки*/
        padding: 11px 41px 11px 41px;/*Внутренние отступы*/
	font: 21px/41px Arial; /*Корректируем шрифт*/
        font-weight: bolder;/*Жирность шрифта*/
        text-transform: uppercase; /*Подымаем маленьких*/
	background: url(./white.png);/*Фоновая картинка*/
}
 
 
.button a {
    text-decoration: none; /*Убираем подчеркивание*/
	cursor: pointer;/*Задаем указатель «рука»*/
 }

Данный метод показал неплохую работоспособность, но как Вы уже могли привыкнуть, в семье не без… строптивого. И речь конечно же идет о семействе браузеров IE. CSS свойство display: inline-block не понимает IE6, да и в IE7 возникает куча проблем, и управлять отображением блочных элементов так же как и отображением строчных элементов становиться потенциально проблематично.

Для того, чтобы «укротить строптивого», нам придется насильно задать инлайновое отображение элементов и задать раскладку.

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

Код нашей странички будет следующим.

HTML:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" media="all" type="text/css" href="./style.css">
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div>
	<div>
		<img src="./omar.jpg" alt=" Блюдо с омаров" />
	</div>
	<a href="#">Заказать<span></span></a>
</div>
    </body>
</html>

Раскладка, или другими словами мелкософтовское свойство hasLayout! Зададим при помощи свойства zoom.

CSS

.kartochka{
	text-align: center; /*Выравниваем текст родителя по центру*/
        background: url(./carbon2.png); /*Задаем картинку-бэкграунд*/
        padding: 31px; /*Внутренние отступы родителя*/
        -moz-border-radius: 11px;/*Фаска для мозиллы*/
        border-radius: 11px;/*Фаска для остальных*/
        min-width: 400px;/*Ограничиваем ширину*/
        min-height: 300px; ;/*Ограничиваем высоту*/
 
}
.button {
	display: inline-block;/*Создаем строчно-блоковое отображение*/
         //display: inline; /*Работаем на IE*/
        zoom: 2;/*Задаем has layout*/
 
	color: red; /*Задаем цвет текста*/
	position: relative; /*Позиционируем*/
	margin: 21px auto 0px auto; /*Отодвигаем от картинки*/
        padding: 11px 41px 11px 41px;/*Внутренние отступы*/
	font: 21px/41px Arial; /*Корректируем шрифт*/
        font-weight: bolder;/*Жирность шрифта*/
        text-transform: uppercase; /*Подымаем маленьких*/
	background: url(./white.png);/*Фоновая картинка*/
}
.button a {
    text-decoration: none; /*Убираем подчеркивание*/
	cursor: pointer;/*Задаем указатель «рука»*/
    }

Важно!!!

  1. Кросс-браузерность. Данное решение показало свою работоспособность в браузерах, начиная с: IE6, Fx3, Op9.5, Sa4, Cr5.

    Для Fx2 свойство отображения inline-block не подает признаков работоспособности, и если Вы решили оптимизировать Ваш ресурс под такой реликварий, воспользуйтесь отображением -moz-inline-stack.

  2. Не забывайте, что задание hasLayout при помощи зума делает наш код не валидным. По этому, если у вас в техническом задании прописано «соответствие w3c стандартам» – воспользуйтесь условными комментариями и вынесите этот кусок кода в отдельный CSS файл.

Послесловие

В реальной практике веб-мастера задачи связанные с резиновой версткой возникают сплошь и рядом, ведь написание отдельных CSS файлов для разных разрешений монитора оправдано лишь в определенных диапазонах. По сути, флекси-верстка это всего лишь взгляд на уже известный Вам мир немного под другим углом. Но на самом деле, иногда простые на первый взгляд задачи доставляют не мало проблем, пока не привыкните…

Сегодня мы на примере рассмотрели потенциальные возможности CSS свойства display: inline-block в задачах «гибкой» верстки. Как было показано, резиновый строчный (блочный) элемент с фоновым изображением можно превратить в строчно-блочный (inline-block), и выровнять по центру, присвоив обертке центральный text-align.
Успехов Вам!!!

Оценок: 5 (средняя 5 из 5)

Понравилась статья? Расскажите о ней друзьям:

Курсы по CSS (в открытом доступе)

Уровень сложности:

Средний

Еще интересное

Центрирование в CSS: Полное руководство

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

  .link {
  padding-top: 30 пикселей;
  padding-bottom: 30 пикселей;
}  

См. Перо с вертикальным центрированием текста Криса Койера (@chriscoyier) на CodePen.

Если заполнение по какой-то причине не подходит, и вы пытаетесь центрировать какой-то текст, который, как вы знаете, не будет переноситься, есть трюк, когда высота строки равна высоте центрирует текст .

  .center-text-trick {
  высота: 100 пикселей;
  высота строки: 100 пикселей;
  белое пространство: nowrap;
}  

См. Pen Centering a line with line-height, автор Chris Coyier (@chriscoyier) на CodePen.

Равное заполнение сверху и снизу может дать эффект центрирования для нескольких строк текста, но если это не сработает, возможно, элемент, в котором находится текст, может быть ячейкой таблицы, буквально или настроен так, чтобы вести себя как одна с CSS. В этом случае свойство vertical-align обрабатывает это, в отличие от того, что обычно делает, а именно выравнивания элементов, выровненных по строке.(Подробнее об этом.)

См. Текст «Центрирование пера» (вроде) с помощью Padding Криса Койера (@chriscoyier) на CodePen.

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

  .flex-center-вертикально {
  дисплей: гибкий;
  justify-content: center;
  flex-direction: столбец;
  высота: 400 пикселей;
}  

См. Перо, вертикальное по центру, несколько строк текста с помощью Flexbox, автор Крис Койер (@chriscoyier) на CodePen.

Помните, что это действительно важно, только если родительский контейнер имеет фиксированную высоту (px,% и т. Д.), Поэтому контейнер здесь имеет высоту.

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

  .ghost-center {
  положение: относительное;
}
.ghost-center :: before {
  содержание: " ";
  дисплей: встроенный блок;
  высота: 100%;
  ширина: 1%;
  вертикальное выравнивание: по центру;
}
.ghost-center p {
  дисплей: встроенный блок;
  вертикальное выравнивание: по центру;
}  

См. Многострочный текст Pen Ghost Centering от Криса Койера (@chriscoyier) на CodePen.

: элемент центрированного текста — HTML: язык разметки гипертекста

Устарело

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

Устаревший центральный элемент HTML (

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

Этот тег устарел в HTML 4 (и XHTML 1) и заменен свойством CSS text-align , которое можно применить к элементу

или к отдельному элементу

. Для центрирования блоков используйте другие свойства CSS, такие как margin-left и margin-right , и установите для них auto (или установите margin на 0 auto ).

Этот элемент реализует интерфейс HTMLElement .

Примечание по реализации: с до Gecko 1.9.2 включительно Firefox реализует интерфейс HTMLSpanElement для этого элемента.

  
Этот текст будет центрирован.

И этот абзац тоже.

  
Этот текст будет центрирован.

И этот абзац тоже.

  

Эта линия будет центрирована.
И эта линия тоже будет.

Применение text-align : center к элементу

или

центрирует содержимое этих элементов, оставляя их габаритные размеры неизменными.

Таблицы BCD загружаются только в браузере

Как горизонтально центрировать a в другом

  1. Фрагменты
  2. CSS
  3. Как горизонтально центрировать
    в другом

HTML-тег

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

Если вы хотите поместить элемент

в центр другого

, используйте стили CSS, чтобы расположить его точно в центре другого

по горизонтали. Следуйте инструкциям ниже и получите фрагмент кода.

Создать HTML¶

  • Создайте два элемента
    с атрибутами id с именами «outer-div» и «inner-div». Поместите второй

    в первый.
  
Я горизонтально центрированный div.

Добавить CSS¶

  • Установить ширину внешнего элемента (т.е. 100% покрывает всю строку). Измените его в соответствии с вашими требованиями.
  • Установите для свойства поля значение «auto», чтобы горизонтально центрировать элемент
    на странице. «Маржа: 0 авто» выполняет фактическое центрирование.
  • Установите предпочтительные цвета для внешнего и внутреннего элементов
    с помощью свойства background-color.
  • Используйте значение «inline-block» свойства display, чтобы отобразить внутренний
    как встроенный элемент, а также как блок.
  • Установите свойство text-align для внешнего элемента
    , чтобы центрировать внутренний. Это свойство работает только со встроенными элементами.
  # outer-div {
  ширина: 100%;
  выравнивание текста: центр;
  цвет фона: # 0666a3
}

# inner-div {
  дисплей: встроенный блок;
  маржа: 0 авто;
  отступ: 3 пикселя;
  цвет фона: # 8ebf42
}  

Вот полный код.

Пример горизонтального центрирования элемента

внутри другого с помощью свойства text-align: ¶
  

  
    <стиль>
      # outer-div {
        ширина: 100%;
        выравнивание текста: центр;
        цвет фона: # 0666a3
      }
      # inner-div {
        дисплей: встроенный блок;
        маржа: 0 авто;
        отступ: 3 пикселя;
        цвет фона: # 8ebf42
      }
    
  
  
    
Я горизонтально центрированный div.

Попробуйте сами »

Результат

Я горизонтально центрированный div.

Установите также отступы для создания пространства вокруг внутреннего элемента.

Пример горизонтального центрирования элемента

внутри другого с помощью свойства display: ¶
  

  
    <стиль>
      # main-container {
        дисплей: гибкий;
        ширина: 100%;
        justify-content: center;
        цвет фона: # 0666a3;
      }
      # main-container div {
        цвет фона: # 8ebf42;
        отступ: 10 пикселей;
      }
    
  
  
    
Я горизонтально центрированный div со свойством отображения 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 в центр экрана

Исходный код

Как центрировать div внутри другого div?

Как центрировать div внутри другого div?

Тег div используется для создания раздела или раздела HTML-документа, в котором размещены другие элементы HTML, и этот раздел / раздел работает как контейнер, стили CSS которого могут быть выполнены как единое целое или может использоваться javascript. для выполнения различных задач с этим контейнером.

Синтаксис:

'Это div веб-страницы.> / h4>

Это текст в элементе div.

Чтобы получить более подробную информацию об использовании тега div и его реализации в HTML, щелкните здесь.

Пример: В этом примере описывается, как мы можем разместить div внутри другого div.

< HTML >

< meta name = "viewport" content = "width = device-width, initial-scale = 1.0 " >

< головка >

< title > Размещение div внутри div title >

< стиль >

h2 {

цвет: зеленый;

размер текста: 2vw;

padding-left: 47px;

}

h3 {

padding-left: 35px;

размер текста: 1vw;

}

стиль >

головка >

< корпус >

< h2 > GeeksforGeeks h2 >

< h3 > Размещение div внутри div h3 >

< div style = "background-color: # 4dff4d; width: 20%; text-align: center; padding: 7px;" >

< div style = "background-color: # 33cc33; width: 50%; text-align: center; padding: 2px;" >

< h4 style = "font-size: 2vw;" > Пример div внутри div. h4 >

< p style = "font-size: 2vw;" > Цвет фона = # 33cc33. p >

< p style = "font-size: 2vw;" > Это текст в элементе div. p >

дел >

дел >

кузов >

html >

Вывод:

Как мы видим, внутренний контейнер div занимал левую часть внутреннего пространства.Чтобы переместить внутренний контейнер div в центр родительского div, мы должны использовать свойство margin атрибута style . Мы можем регулировать пространство вокруг любого HTML-элемента с помощью этого свойства поля, просто задав ему желаемые значения.

Теперь речь идет о роли этого свойства в настройке внутреннего div. Если значение поля установлено на 0, то есть margin: 0 , оно сообщает браузеру, что верхнее и нижнее поля элемента HTML (здесь внутренний div) будут равны 0.Кроме того, если мы запишем значение поля как margin: 0 auto , оно даст браузеру команду автоматически настроить левое и правое поле на одинаковый размер в соответствии с шириной элемента HTML.

Синтаксис внутреннего div:

Пример: В этом примере описывается, как мы можем центрировать div внутри div.

< HTML >

< meta name = "viewport" content = "width = device-width, initial-scale = 1.0 " >

< головка >

< title > Выравнивание по центру внутри div title >

< стиль >

h2 {

цвет: зеленый;

padding-left: 47px;

размер текста: 2vw;

}

h3 {

padding-left: 11px;

размер текста: 1vw;

}

стиль >

головка >

< корпус >

< h2 > GeeksforGeeks h2 >

< h3 > Центрирование внутреннего div h3 >

< div style = "background-color: # 4dff4d; width: 20%; text-align: center; padding: 7px;" >

< div style = "background-color: # 33cc33; width: 50%; text-align: center; padding: 2px; margin: 0 auto" >

< h4 style = "font-size: 2vw;" > Пример div внутри div. h4 >

< p style = "font-size: 2vw;" > Цвет фона = # 33cc33. p >

< p style = "font-size: 2vw;" > Это текст в элементе div. p >

дел >

дел >

кузов >

html >

Выход:

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

Синтаксис внутреннего div:

 

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

< HTML >

< meta name = "viewport" content = "width = device-width, initial-scale = 1.0 " >

< головка >

< title > Выравнивание по центру внутри div title >

< стиль >

h2 {

цвет: зеленый;

padding-left: 47px;

размер текста: 2vw;

}

h3 {

padding-left: 11px;

размер текста: 1vw;

}

стиль >

головка >

< корпус >

< h2 > GeeksforGeeks h2 >

< h3 > Центрирование внутреннего div h3 >

< div style = "background-color: # 4dff4d; width: 20%; text-align: center; padding: 7px;" >

< div style = "background-color: # 33cc33; width: 50%; text-align: center; padding: 2px; margin: 10px auto" >

< h4 style = "font-size: 2vw;" > Пример div внутри div. h4 >

< p style = "font-size: 2vw;" > Цвет фона = # 33cc33. p >

< p style = "font-size: 2vw;" > Это текст в элементе div. p >

дел >

дел >

кузов >

html >

Выход:

Пример: В этом примере описывается, как мы можем разместить 2 блока div рядом с каждым блоком, имеющим выровненный по центру блок внутри себя.

< HTML >

< meta name = "viewport" content = "width = device-width, initial-scale = 1.0" >

< голова >

< title > Пример 2 div title >

< стиль >

h2 {

цвет: зеленый;

размер текста: 2vw;

}

h3 {

размер текста: 1vw;

}

h2, h3 {

padding-left: 100px;

}

стиль >

головка >

< корпус >

< h2 > GeeksforGeeks h2 >

< h3 > Пример с 2 div h3 >

< div style = "background-color: # 4dff4d; width: 25%; text-align: center; padding: 7px; float: left;" >

< div style = "background-color: # 33cc33; width: 50%; text-align: center; padding: 2px; margin: 0 auto" >

< h4 style = "font-size: 2vw;" > Пример div внутри div. h4 >

< p style = "font-size: 2vw;" > Цвет фона = # 33cc33. p >

< p style = "font-size: 2vw;" > Это текст в элементе div. p >

дел >

дел >

< div style = "background-color: # 00cc44; width: 25%; text-align: center; padding: 7px; float: left;" >

< div style = "background-color: # 66ff33; width: 50%; text-align: center; padding: 2px; margin: 0 auto" >

< h4 style = "font-size: 2vw;" > Пример div внутри div. h4 >

< p style = "font-size: 2vw;" > Цвет фона = # 66ff33. p >

< p style = "font-size: 2vw;" > Это текст в элементе div. p >

дел >

дел >

кузов >

html >

Выход:

Центрирование вещей с помощью CSS Flexbox - Scotch.io

Flexbox уже некоторое время отсутствует в CSS. Глядя на страницу «Могу ли я использовать Flexbox», мы видим, что это приемлемо во всех современных браузерах и даже немного в IE!

Центрирование CSS до появления flexbox всегда было рутиной. Ни один из основных методов никогда не работал на 100% стабильно. Flexbox делает центрирование элементов таким же простым, как 3 строки !

Чтобы настроить элемент для использования flexbox, нам просто нужно использовать свойство отображения CSS:

  div {
    дисплей: гибкий;
}  

Хотя flexbox может показаться простым в использовании с приведенной выше строкой, он может быть очень мощным, если вы понимаете все его свойства. Давайте посмотрим на некоторые общие задачи центрирования flexbox и способы их решения.

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

  
я центрирован по горизонтали!

Чтобы получить горизонтальное центрирование блока , нам нужно установить родительский контейнер с на display: flex; .Затем мы можем использовать justify-content для центрирования по горизонтали!

  .container {
    дисплей: гибкий;
    justify-content: center;
}  

По умолчанию justify-content относится к оси X (по горизонтали). Мы устанавливаем center , чтобы наши дочерние элементы располагались по центру по горизонтали с помощью flexbox.

Изучите Tailwind CSS с нуля

Вот CodePen:

Вертикальное центрирование аналогично центрированию по горизонтали, за исключением имени свойства. justify-content - это ось X, а имя свойства, которое нам нужно для оси Y, - align-items .

  
я центрирован по вертикали!

В CSS мы будем использовать align-items : мы также должны не забыть установить высоту, иначе div не сможет центрировать себя.

  .container {
  мин-высота: 100vh; // высота области просмотра браузера
  дисплей: гибкий;
  align-items: center;
}  

Вот CodePen:

Для центрирования по горизонтали и вертикали мы будем использовать как justify-content , так и align-items .

  .container {
  мин-высота: 100vh; // высота области просмотра браузера
  дисплей: гибкий;
    justify-content: center;
  align-items: center;
}  

Вот CodePen:

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

  .container {
    дисплей: гибкий;
    justify-content: пробел между;
}  

Вот CodePen:

Flexbox упрощает выполнение многих задач в CSS.Центрирование - это то, что я использую в CSS каждый день. Спасибо, flexbox!

Понравилась эта статья?

Подпишитесь на @chris__sev в Twitter

Center Div по горизонтали и вертикали: 5 способов центрировать div по вертикали и горизонтали с помощью CSS

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

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

Метод 1. Использование Flex

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

Мы определяем родительский элемент с помощью свойства display: flex вместе с justify-content (горизонтальное размещение по умолчанию) и align-items (вертикальное размещение по умолчанию) center. Эти свойства соответствуют спецификациям Flex.Один из сбоев в выполнении этой работы - предоставление родительскому элементу фиксированной ширины и высоты.

Метод 2: Использование сетки

Используя CSS Grid, мы можем достичь нашей цели двумя способами. Во-первых, с помощью свойств 'place-items', и, во-вторых, с помощью 'выровнять и по ширине' . И снова эти свойства являются эксклюзивными для CSS Grid.

a) Используя place-items , мы предоставляем правила родителю, и только он творит чудеса.Мы даем родительскому элементу 'display: grid' и 'place-items: center' , и все становится суперцентрированным.

b) Используя 'justify and align-self' , мы предоставляем родительскому контейнеру свойство 'display: grid' , а основные свойства передаются дочернему контейнеру - 'align-self Стойкам (вертикальное размещение) и 'justify-self' (горизонтальное размещение) присваивается значение по центру.

Метод 3. Использование CSS-позиционирования и преобразования CSS

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

Метод 4: Использование поля CSS

Еще один старый метод отлично работает во всех браузерах.Все, что нам нужно сделать, это определить стиль 'margin: 0 auto' для дочернего контейнера. Я лично столкнулся с некоторыми несоответствиями при использовании этого метода, поэтому я всегда добавляю дополнительные свойства для центрирования элементов.

Метод 5. Использование CSS-позиционирования

Это один из распространенных методов, используемых с момента рождения «CSS Positioning» . Мы делаем дочерний контейнер «абсолютным» для родительского и определяем свойства top, left, right и bottom «0» вместе с «margin: auto» .

Примечание: вставка CSS - это сокращение для свойства top, left, right и bottom (в настоящее время это свойство поддерживается только в Firefox)

вставка: 2px 3px 4px 5px / * верхний правый нижний левый * /

Бонусный метод: использование таблицы CSS

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

Мы должны предоставить 'display: table' оболочке (которая является уровнем выше родительского), затем мы используем свойство 'display: table-cell' в родительском элементе.

Двумя различиями в дочерних свойствах: во-первых, используется свойство 'margin' , а в другом - 'display: inline-block' .

Мы подошли к концу этой статьи.Я прикрепил Codepen ниже, где вы можете найти все вышеупомянутые трюки в одном месте, поэкспериментировать с ним и поделиться здесь, если вы будете следовать каким-либо классным трюкам для центрирования вещей.

Надеюсь, эта статья окажется для вас полезной и информативной. Если вам понравилась эта статья, дайте мне оценку 👍 Не забудьте добавить ее в закладки для дальнейшего использования 🔖

Спасибо за чтение 🤓

.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

2021 © Все права защищены.