Как div отцентрировать: Центрирование горизонтальное и вертикальное

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. ›
3. CSS
4. ›
5. Как центрировать контент по вертикали и по горизонтали с помощью 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;
}

4. Следующим шагом укажите макет с помощью свойства 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.

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

5. Добавьте свойство 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 элемент вертикально центрирован, можно центрировать его и по горизонтали.

6. Необходимо применить свойство 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:

CSS:

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

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

CSS:

Пример:

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

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

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

CSS:

Пример:

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

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

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

CSS:

Пример:

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

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

CSS:

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

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

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

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

CSS:

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

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

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

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

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

CSS:

Пример:

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

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

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

CSS:

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

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

CSS:

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 (

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

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

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

И эта линия тоже будет.
  

  

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

  # outer-div {
  ширина: 100%;
  выравнивание текста: центр;
  цвет фона: # 0666a3
}

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

  

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

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

  

  
    <стиль>
      # main-container {
        дисплей: гибкий;
        ширина: 100%;
        justify-content: center;
        цвет фона: # 0666a3;
      }
      # main-container div {
        цвет фона: # 8ebf42;
        отступ: 10 пикселей;
      }
    
  
  
    

      
 Я горизонтально центрированный div со свойством отображения CSS.
    
  
  

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

 

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

  

  

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

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

  

  

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

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

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

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