Содержание

CSS выровнять три дива по горизонтали



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

|IMAGE| +TEXT+ |IMAGE|

Каждый div содержит изображение (2) и текст (1) соответственно. Выровнять их легко, Проблема в том, что я хочу, чтобы CENTER div автоматически соответствовал ширине окна браузера, а остальные IMAGE divs всегда находились справа и слева соответственно.

Что-то вроде этого, например, если пользователь разворачивает окно:

|IMAGE| +++++++++++++++++++TEXT++++++++++++++++++++++++ |IMAGE|

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

Как я мог получить такое поведение? Заранее спасибо.

css
Поделиться Источник lidermin     02 сентября 2010 в 15:14

2 ответа


  • Как выровнять флажки по горизонтали с CSS

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

  • CSS Выровнять Абзацы По Горизонтали

    У меня есть несколько абзацев под определенным классом, которые я хочу выровнять по горизонтали. В принципе, я хочу, чтобы каждый абзац имел свою собственную колонку. Я использовал float: right; . который превратил их в столбцы, но затем вывел их из форматирования с rest веб-страницы. Любые советы…



42

#container { text-align: center; }
#div-1 { float: left; }
#div-2 { display: inline; }
#div-3 { float: right; }

Если это все еще не ведет себя так, как вы хотите, пожалуйста, дайте более подробные требования.

Поделиться Bobby Jack     02 сентября 2010 в 15:31



5

Вот еще одна встроенная реализация для трех изображений бок о бок:

<div>

    <div><img src="image1.
png"/></div> <div><img src="image2.png"/></div> <div><img src="image3.png"/></div> </div>

Поделиться Ian     30 июля 2012 в 14:50


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


Как я могу разместить три дива с отзывчивыми свойствами?

Как я могу разместить три дива, как на добавленном изображении (два по горизонтали и один по вертикали), в нижней части горизонтальных дивов с адаптивными свойствами? Я использую следующее CSS:…


Горизонтально выровнять 3 дива

У меня есть 3 дива, которые я хочу выровнять по горизонтали, я использовал этот код для других дивов на моем сайте, и они работают, есть ли что-то, чего мне не хватает в этих? пример…


Выровнять список по горизонтали с css

Я пытаюсь выровнять по горизонтали список, содержащий переключатели внутри div. Пример можно посмотреть по следующему адресу http:/ / shopper.webresponsive.co.uk / индекс. php/жалюзи /…


Как выровнять флажки по горизонтали с CSS

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


CSS Выровнять Абзацы По Горизонтали

У меня есть несколько абзацев под определенным классом, которые я хочу выровнять по горизонтали. В принципе, я хочу, чтобы каждый абзац имел свою собственную колонку. Я использовал float: right; ….


как выровнять div по горизонтали в CSS

У меня есть три дочерних дива внутри контейнера, и я хочу выровнять эти дивы по горизонтали. Я попытался использовать свойство css float , но круги становятся овальными. Markup код: <div…


Как выровнять по центру два дива, имеющих Родительский div

Если у меня есть два дива в Родительском диве, и все три дива имеют поплавок слева. Что мне нужно сделать, так это выровнять по центру два дочерних дива, не удаляя поплавок влево.


Выровняйте три дива по горизонтали с помощью modal (CSS, html)

Я пытаюсь выровнять три дива по горизонтали, но сталкиваюсь с некоторыми проблемами. Я делаю это, чтобы построить некоторые модалы. Спасибо! html код <div id=modal-wrapper> <div…


Выровняйте три дива бок о бок с css

У меня было три дива внутри основного дива с идентификатором main_div и уже есть css, как показано ниже <div id=main_div style=height:10px; line-height:50px; margin-top:1px;…


Три дива, выровненные по горизонтали

Я слишком долго пытался решить эту проблему, но ничего не добился. Я пытаюсь выровнять три встроенных блока divs по горизонтали с помощью text-align: justify в пределах их родительского 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 заполнит всё доступное свободное место по своей оси. Тем же образом работает 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 (Макет Сетки)

Выравнивание div по центру экрана по вертикали и горизонтали — Bookamba блог

Голуби на картинке поста выбраны не случайно, если обратить внимание на того, что справа, даже он уже выровнен по вертикали и по горизонтали, а ваш Div – еще нет (:

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

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

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

Итак, давайте разберем код по порядку. Существует несколько способов, как выровнять блок по вертикали. Лично мне нравится способ с имитированием таблицы. Так как в нашем случае мы хотим выровнять блок по центру, нужно предварительно растянуть body и html до 100 процентов в высоту. По умолчанию height у них auto.

body, html {
height: 100%;
}

Далее у нас общий врапер, в который все завернуто (по сути можно и без него)

.login-page-wraper {
height: 100%;
}

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

.login-page-wraper .table-emulate {
display: table;
width: 100%;
height: 100%;
position: relative;
}

.login-page-wraper .table-cell-emulate {
display: table-cell;
width: 100%;
height: 100%;
vertical-align: middle;
}

Все, теперь блоки, которые будут находится внутри .table-cell-emulate, будут выравниваться по центру по вертикали.

Для выравнивания по горизонтали мы применяем стандартный прием с margin: 0 auto; только в нашем случае думаем заранее о том, что высоту окна браузера могут сжать или просмотреть на каком-то старом устройстве, поэтому добавляем отступы сверху и снизу по 70 пикселей, чтобы шапка и футер не прилипали, если высота окна браузера будет маленькой.

.login-page-wraper .login-form {
width: 400px;
margin: 70px auto;
}

Ну и конечно не забываем “прилепить” шапку и футер

.login-page-wraper header,
.login-page-wraper footer {
background: #eee;
padding: 8px 0;
position: absolute;
}

.login-page-wraper header {
top: 0;
left: 0;
width: 100%;
}

.login-page-wraper footer {
bottom: 0;
left: 0;
width: 100%;
}

Для этого делаем их абсолютно позиционируемыми и footer лепим вниз bottom: 0; А header наверх top: 0;

Конечно в наше время не стоит забывать и о адаптивности верстки, поэтому добавляем один медиазапрос:

@media only screen and (max-width : 450px) {
.login-page-wraper .login-form {
width: 100%;
padding: 0 15px;
}
}

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

Посмотреть пример

Как вертикальное выравнивание элементов в div?

По умолчанию h2 является элементом блока и будет отображаться в строке после первого img, а второй img появится в строке, следующей за блоком.

Чтобы это не происходило, вы можете установить h2 для поведения встроенного потока:

#header > h2 { display: inline; }

Что касается абсолютного позиционирования img внутри div , вам нужно установить содержащий div для «известного размера», прежде чем это будет работать должным образом. По моему опыту, вам также нужно изменить атрибут позиции с значения по умолчанию — положение: относительный работает для меня:

#header { position: relative; width: 20em; height: 20em; }
#img-for-abs-positioning { position: absolute; top: 0; left: 0; }

Если вы можете заставить это работать, вы можете попытаться постепенно удалять атрибуты height, width, position из div.header, чтобы получить минимальные обязательные атрибуты для получения желаемого эффекта.

ОБНОВИТЬ:

Вот полный пример, который работает на Firefox 3:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Example of vertical positioning inside a div</title>
        <style type="text/css">
            #header > h2 { display: inline; }
            #header { border: solid 1px red; 
                      position: relative; }
            #img-for-abs-positioning { position: absolute;
                                       bottom: -1em; right: 2em; }
        </style>
    </head>

    <body>
        <div>
            <img src="#" alt="Image 1" />
            <h2>Header</h2>
            <img src="#" alt="Image 2" 
                 />
        </div>
    </body>
</html>

Css выравнивание по центру по горизонтали

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

Горизонтальное

text-align

Для центрирования инлайновых элементов – достаточно поставить родителю text-align: center :

Для центрирования блока это уже не подойдёт, свойство просто не подействует. Например:

margin: auto

Блок по горизонтали центрируется margin: auto :

В отличие от width/height , значение auto для margin само не появляется. Обычно margin равно конкретной величине для элемента, например 0 для DIV . Нужно поставить его явно.

Значение margin-left:auto/margin-right:auto заставляет браузер выделять под margin всё доступное сбоку пространство. А если и то и другое auto , то слева и справа будет одинаковый отступ, таким образом элемент окажется в середине. Детали вычислений описаны в разделе спецификации Calculating widths and margins.

Вертикальное

Для горизонтального центрирования всё просто. Вертикальное же изначально не было предусмотрено в спецификации CSS и по сей день вызывает ряд проблем.

Есть три основных решения.

position:absolute + margin

Центрируемый элемент позиционируем абсолютно и опускаем до середины по вертикали при помощи top:50% :

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

Высота центрируемого элемента должна быть известна. Родитель может иметь любую высоту.

Если мы знаем, что это ровно одна строка, то её высота равна line-height .

Приподнимем элемент на пол-высоты при помощи margin-top :

При стандартных настройках браузера высота строки line-height: 1.25 , если поделить на два 1.25em / 2 = 0.625em .

Конечно, высота может быть и другой, главное чтобы мы её знали заранее.

Можно аналогично центрировать и по горизонтали, если известен горизонтальный размер, при помощи left:50% и отрицательного margin-left .

Одна строка: line-height

Вертикально отцентрировать одну строку в элементе с известной высотой height можно, указав эту высоту в свойстве line-height :

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

Таблица с vertical-align

У свойства vertical-align, которое управляет вертикальным расположением элемента, есть два режима работы.

В таблицах свойство vertical-align указывает расположение содержимого ячейки.

Его возможные значения:

baseline Значение по умолчанию. middle , top , bottom Располагать содержимое посередине, вверху, внизу ячейки.

Например, ниже есть таблица со всеми 3-мя значениями:

Обратим внимание, что в ячейке с vertical-align: middle содержимое находится по центру. Таким образом, можно обернуть нужный элемент в таблицу размера width:100%;height:100% с одной ячейкой, у которой указать vertical-align:middle , и он будет отцентрирован.

Но мы рассмотрим более красивый способ, который поддерживается во всех современных браузерах, и в IE8+. В них не обязательно делать таблицу, так как доступно значение display:table-cell . Для элемента с таким display используются те же алгоритмы вычисления ширины и центрирования, что и в TD . И, в том числе, работает vertical-align :

Этот способ замечателен тем, что он не требует знания высоты элементов.

Однако у него есть особенность. Вместе с vertical-align родительский блок получает табличный алгоритм вычисления ширины и начинает подстраиваться под содержимое. Это не всегда желательно.

Чтобы его растянуть, нужно указать width явно, например: 300px :

Можно и в процентах, но в примере выше они не сработают, потому что структура таблицы «сломана» – ячейка есть, а собственно таблицы-то нет.

Это можно починить, завернув «псевдоячейку» в элемент с display:table , которому и поставим ширину:

Если дополнительно нужно горизонтальное центрирование – оно обеспечивается другими средствами, например margin: 0 auto для блочных элементов или text-align:center на родителе – для других.

Центрирование в строке с vertical-align

Для инлайновых элементов ( display:inline/inline-block ), включая картинки, свойство vertical-align центрирует сам инлайн-элемент в окружающем его тексте.

В этом случае набор значений несколько другой:

Это можно использовать и для центрирования, если высота родителя известна, а центрируемого элемента – нет.

Допустим, высота внешнего элемента 120px . Укажем её в свойстве line-height :

Работает во всех браузерах и IE8+.

Свойство line-height наследуется, поэтому надо знать «правильную» высоту строки и переопределять её для inner .

Центрирование с vertical-align без таблиц

Если центрирование должно работать для любой высоты родителя и центрируемого элемента, то обычно используют таблицы или display:table-cell с vertical-align .

Если центрируются не-блочные элементы, например inline или inline-block , то vertical-align может решить задачу без всяких таблиц. Правда, понадобится вспомогательный элемент (можно через :before ).

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

Для всех современных браузеров и IE8 можно добавить вспомогательный элемент через :before :

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

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

    Убрать лишний пробел между div и началом inner , будет

Центрирование с использованием модели flexbox

Данный метод поддерживается всеми современными браузерами.

  • Не требуется знания высоты центрируемого элемента.
  • CSS чистый, короткий и не требует дополнительных элементов.
  • Не поддерживается IE9-, IE10 поддерживает предыдущую версию flexbox.

Итого

Обобщим решения, которые обсуждались в этой статье.

Для горизонтального центрирования:

  • text-align: center – центрирует инлайн-элементы в блоке.
  • margin: 0 auto – центрирует блок внутри родителя. У блока должна быть указана ширина.

Для вертикального центрирования одного блока внутри другого:

Если размер центрируемого элемента известен, а родителя – нет

Родителю position:relative , потомку position:absolute; top:50% и margin-top:- . Аналогично можно отцентрировать и по горизонтали.

Если нужно отцентрировать одну строку в блоке, высота которого известна

Поставить блоку line-height: . Нужны конкретные единицы высоты ( px , em …). Значение line-height:100% не будет работать, т.к. проценты берутся не от высоты блока, а от текущей line-height .

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

Поставить line-height родителю во всю его высоту, а потомку поставить display:inline-block .

Высота обоих элементов неизвестна.

  1. Сделать элемент-родитель ячейкой таблицы при помощи display:table-cell (IE8) или реальной таблицы, и поставить ему vertical-align:middle . Отлично работает, но мы имеем дело с таблицей вместо обычного блока.
  1. Решение со вспомогательным элементом outer:before и инлайн-блоками. Вполне универсально и не создаёт таблицу.
  2. Решение с использованием flexbox.

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

Простое центрирование DIV-элемента на странице

Этот метод будет отлично работать во всех браузерах.

Значение auto в свойстве margin устанавливает левый и правый отступ на все пространство, доступное на странице. Здесь важно запомнить, что у центрируемого div-элемента обязательно должно быть установлено значение width .

Центрируем DIV внутри DIV-элемента старым способом

Этот метод div выравнивания по центру будет работать во всех браузерах.

Внешний div может быть помещен как угодно, но у внутреннего блока div обязательно должна быть указана ширина ( width ).

Центрируем DIV внутри DIV-элемента с помощью inline-block

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

Свойство text-align работает только в inline-элементах . Значение inline-block позволяет отобразить внутренний div в качестве inline-элемента , а также в качестве блока ( inline-block ). Свойство text-align во внешнем div-элементе позволит нам центрировать внутренний div .

Центрируем DIV внутри DIV-элемента горизонтально и вертикально

Здесь для центрирования div по центру страницы используется margin: auto . Пример будет работать во всех современных браузерах.

У внутреннего div-элемента должна быть указана ширина ( width ) и высота ( height ). Метод не сработает, если у внешнего div-элемента будет фиксированная высота.

Центрируем DIV по нижней границе страницы

Здесь для расположения div по центру по вертикали используется margin: auto и абсолютное позиционирование для внешнего элемента. Метод будет работать во всех современных браузерах.

У внутреннего div должна быть установлена ширина. Пространство внизу страницы регулируется с помощью свойства bottom внешнего div . Вы также можете центрировать div по верхней границе страницы, заменив свойство bottom на свойство top .

Центрируем DIV на странице вертикально и горизонтально

Здесь, чтобы выровнять div по центру, снова используется margin: auto и абсолютное позиционирование внешнего div . Метод будет работать во всех современных браузерах.

У div-элемента должна быть установлена ширина ( width ) и высота ( height ).

Делаем адаптивное центрирование DIV-элемента на странице

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

У центрированного div-элемента должно быть установлено свойство max-width .

Центрируем DIV внутри элемента с помощью свойств внутреннего блока

Внутренний div-элемент здесь адаптивен. Этот метод расположения div внутри div по центру будет работать во всех браузерах.

У внутреннего div должно быть установлено свойство max-width .

Центрируем два адаптивных div-элемента рядом друг с другом

Здесь у нас два расположенных рядом адаптивных div-элемента. Этот метод установки div по центру экрана будет работать во всех современных браузерах.

Здесь у нас несколько элементов с примененным свойством inline-block , расположенных внутри центрированного контейнера. В этом примере также используются медиа-запросы CSS ; то есть, если размер экрана меньше 600 пикселей, то свойство max-width как для левого, так и для правого div-элемента устанавливается на 100%.

DIV-элемент, центрированный при помощи Flexbox

Здесь мы располагаем CSS div по центру с помощью Flexbox . Он предназначен для того, чтобы облегчить процесс разработки дизайна пользовательских интерфейсов. Этот модуль поддерживается Chrome 38+ , IE11 , Microsoft Edge , Firefox 38+ , Safari 9+ , Opera 30+ , iOS Safari 9+ , а также Android Browser 40+ .

Значение свойства height может быть любым, но только больше размера центрированного div-элемента.

Данная публикация представляет собой перевод статьи « THE COMPLETE GUIDE TO CENTERING A DIV » , подготовленной дружной командой проекта Интернет-технологии.ру

Смотрите также указатель всех приёмов работы.

Центрирование

В последних реализациях CSS вы можете также использовать возможности Уровня 3 (CSS3), позволяющие выровнять по центру абсолютно позиционированные элементы:

  • Выравнивание по вертикали в уровне 3
  • Выравнивание по вертикали и горизонтали в уровне 3
  • Выравнивание в области просмотра в уровне 3

Центрирование строк текста

Самый распространённый и (потому) самый лёгкий тип центрирования — это центрирование строк текста в абзаце или заголовке. Для этого CSS обладает свойством ‘text-align’:

которое отображает каждую строку в абзаце P или заголовке h3 по центру между полями, вот так:

Все строки в этом абзаце выровнены по центру полями абзаца. Это стало возможным благодаря значению ‘center’ свойства CSS ‘text-align’.

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

Иногда центрировать нужно не текст, а блок в целом. Или, по-другому говоря: мы хотим, чтобы правое и левое поля были одинаковыми. Для этого нужно установить поля на ‘auto’. Это обычно используется для блоков с фиксированной шириной, потому что если блок сам по себе гибкий, он просто займёт всю доступную ширину. Вот пример:

Этот довольно узкий блок текста центрирован. Заметьте, что строки внутри блока не центрированы (они выровнены влево), в отличие от предыдущего примера.

Этот метод также можно использовать для центрирования изображения: поместите его в собственный блок и примените свойства полей. Например:

Следующее изображение центрировано:

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

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

Этот маленький абзац центрирован вертикально.

Центрирование по вертикали в CSS уровня 3

Уровень 3 CSS предлагает и другие возможности. На момент написания этой статьи (2014 год), хороший способ вертикального выравнивания блока без использования абсолютного позиционирования (что может приводить к частичному перекрытию текста) всё ещё обсуждается. Но если вам известно, что частичное перекрытие текста не станет проблемой в вашем документе, вы можете использовать свойство ‘transform’, чтобы выровнять по центру абсолютно позиционированный элемент. Например:

Этот абзац выровнен вертикально по центру.

Для документа, который выглядит вот так:

таблица стилей выглядит так:

Основные правила:

  1. Сделайте контейнер относительно позиционированным (position: relative), что превратит его в контейнер для абсолютно позиционированных элементов.
  2. Сам элемент сделайте абсолютно позиционированным (position: absolute).
  3. Поместите элемент посередине контейнера с помощью ‘top: 50%’. (Заметьте, что ‘50%’ здесь означают 50% высоты контейнера.)
  4. Используйте translate, чтобы переместить элемент вверх на половину своей собственной высоты. ( ‘50%’ в ‘translate(0, -50%)’ указывают на высоту самого элемента.)

Недавно (начиная приблизительно с 2015-го года) в нескольких реализациях CSS стала доступна новая техника. Она основана на новом ключевом слове ‘flex’ для свойства ‘display’. Это ключевое слово предназначено для использования в графическом интерфейсе пользователя (GUI), но ничто не мешает вам использовать его в документе, если у этого документа правильная структура.

Этот абзац выровнен по центру вертикально.

таблица стилей выглядит следующим образом:

Вертикальное и горизонтальное центрирование в CSS уровня 3

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

Побочный эффект абсолютного позиционирования абзаца состоит в том, что абзац становится ровно таким широким, каким он должен быть (если только мы явно не укажем ширину). В примере ниже мы именно этого и хотим: мы размещаем по центру абзац из одного слова (“Центр!“), так что ширина абзаца должна быть равна ширине этого слова.

Жёлтый фон наглядно демонстрирует, что абзац действительно той же ширины, что и его содержимое. Мы подразумеваем, что разметка осталась прежней:

В плане вертикального центрирования эта таблица стилей схожа с таблицей из предыдущего примера. Но теперь мы ещё перемещаем элемент на полпути через контейнер с помощью правила ‘left: 50%’ и одновременно сдвигаем его влево на половину своей собственной ширины в преобразовании ‘translate’:

Следующий пример объясняет, зачем требуется правило ‘margin-right: -50%’.

Когда форматер CSS поддерживает ‘flex’, всё становится ещё легче:

с этой таблицей стилей:

т.е. единственным дополнением является ‘justify-content: center’. Точно также, как ‘align-items’ определяет вертикальное выравнивание содержимого контейнера, ‘justify-content’ таким же образом определяет горизонтальное выравнивание. (На самом деле всё несколько сложнее, как следует из их названий, но в простом случае, работает это именно так.). Побочный эффект от применения свойства ‘flex’ состоит в том, что дочерний элемент, в нашем случае это Р, автоматически становится настолько малым, насколько это возможно.

Центрирование в области просмотра в CSS уровня 3

Контейнером по умолчанию для абсолютно позиционированных элементов является область просмотра. (В случае c браузером это окно браузера). Таким образом, центрирование элемента в области просмотра не вызывает сложности. Далее приведен полный пример. (В этом примере использован синтаксис HTML5.)

Вы можете увидеть результат в отдельном документе.

Правило ‘margin-right: -50%’ необходимо для компенсации ‘left: 50%’. Правило ‘left’ уменьшает доступную для элемента ширину на 50%. Поэтому визуализатор постарается сделать линии длиною не более половины ширины контейнера. Указав на то, что правое поле элемента находится правее на ту же самую величину, отметим, что максимальная длина линии снова равняется ширине контейнера.

Попробуйте изменить размер окна: вы увидите, что каждое предложение находится на одной строке, когда окно достаточно широкое. Только тогда, когда окно слишком узкое для всего предложения, это предложение будет разбито на несколько строк. Когда вы удалите правило ‘margin-right: -50%’ и снова измените размер окна, вы заметите, что предложения будут уже разбиты, хотя окно все еще шире строк текста в два раза.

(Использование свойства ‘translate’ для центрирования в области просмотра было впервые предложено “Charlie” в ответе на сайте Stack Overflow.)

Навигация по сайту

Created 5 May 2001;
Last updated Вт 05 ноя 2019 19:12:56

Рекомендуем к прочтению

CSS: элементы в строку | web-sprints

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

  1. Использовать display: inline-block
  2. Использовать float: left/right

Рассмотрим каждый из них.

CSS свойство display: inline-block

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

HTML разметка выглядит следующим образом:

<div> <div> </div> <div> </div> <div> </div> </div>

<div>

<div>

</div>

<div>

</div>

<div>

</div>

</div>

CSS стили:

. parent { border: 1px solid black; height: 200px; } .child { height: 100px; display: inline-block; background: red; width: 30%; }

.parent

{

border: 1px solid black;

height: 200px;

}

.child

{

height: 100px;

display: inline-block;

background: red;

width: 30%;

}

Как видно на изображении я добавил свойства background и border, чтоб наглядно видеть происходящее на странице. Обязательно задаем всем элементам height иначе оно будет равно 0 по умолчанию и мы ни чего не увидим. Трем блокам .child задаем display: inline-block и width: 30%. ВНИМАНИЕ! Если не установить свойство width, блоки примут по умолчанию значение ширины всей страницы и от свойства display не будет ни какого толку.  Важно понимать что элементы встанут в одну линию если для них обоих (или более) будет задано свойство display: inline-block при этом между ними не будет других элементов, с отличным от данного, свойством. Если попробуем изменить класс для блока .child находящегося по середине, тем самым убрав все стили, то увидим что все элементы выстроились в ряд.

CSS свойство float: left или float: right

Аналогичное по результату inline-block, но отличное по принципам работы свойство float — в переводе с английского означает — обтекание. Давайте попробуем убрать из предыдущего примера

и добавим вместо него

Результат окажется точно таким же, но важное отличие состоит в том что данное свойство достаточно назначить одному элементу, а следующий в независимости от свойств встанет в одну строку с ним. Но это сработает только с заполненными элементами типа <p> с текстом внутри, а в данном случае элемент без свойства float встанет в тоже самое место что и предыдущий элемент. Для того что бы его подвинуть необходимо использовать margin-left .

Вертикальное и горизонтальное выравнивание по центру на HTML и CSS

Допустим есть информационный блок на сайте или форма для входа. И возникает задача поместить этот блок точно в центре вне зависимости от разрешения экрана. Существует множество способов горизонтального и вертикального выравнивания. Рассмотрим наиболее простой из них.

Выровнять объект по горизонтали несложно для этого достаточно использовать спецификацию CSS margin. Вспомогательной здесь является спецификация display. Все, что потребуется создать это контейнер div с соответствующими параметрами:

<div>Выравниванием содержимое по центру</div>

Параметр спецификации display table указывает на то, что объект якобы является блочной таблицей.

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

Для этого нужно будет добавить еще один контейнер <div>. Также нужно использовать спецификацию display, но уже с параметром table-cell, якобы указывая на ячейку таблицы. В таблице же параметром, отвечающим за положение по вертикали является vertical-align. Итак, используя все спецификации получаем следующий код:

<div><div>Выравниванием содержимое по центру</div></div>

Обращаем ваше внимание на то, что в первом контейнере div для стилей добавлена еще спецификация height равная 100%. Тем самым мы указываем на то, что необходимо использовать именно высоту всей страницы.

Еще нужно обратить внимание на спецификацию vertical-align:middle. Дело в том, что если написать в заголовке html 5 документа по стандарту <!DOCTYPE HTML> вышеуказанный код перестает работать. Проблема решается указанием высоты для тэгов html и body. Причем для второго нужно указать не 100%, а несколько меньше, так как появляется вертикальная полоса прокрутки.

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

<!DOCTYPE HTML>
<html>
<head>
<style>
html { height: 100%; }
body { height: 95%; }
</style>
</head>
<body>
<div>
<div>Выравниванием содержимое по центру
</div></div>
</body>
</html>

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

При выравнивании объекта по центру часто нужно использовать внешние или внутренние отступы в html на css для его смещения.

 

Поделиться в соц. сетях:

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

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.
Попробуйте сами »

Центрирование объектов с помощью 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

2 способа центрирования элементов с помощью Flexbox

Возможность центрировать элементы по горизонтали и вертикали очень просто с помощью CSS Flexbox. Стандартный способ — использовать свойства flex. Но вы также можете использовать «сделай это с запасом». Довольно аккуратно, правильно 👏

В этом примечании к коду я предполагаю, что вы знакомы с Flexbox.Но если вы новичок в Flexbox, я рекомендую сначала проверить мой БЕСПЛАТНЫЙ курс Flexbox30 — Изучите Flexbox с 30 лакомыми кусочками кода.

Использование свойств Flex

Использование полей

Центрирование с помощью свойств Flex

Самый простой способ — использовать свойства Flex и добавить его в родительский контейнер с помощью элементов выравнивания , и justify-content .

html

css

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

Когда вы устанавливаете display: flex , направление гибкости должно быть row .В этом случае justify-content будет управлять горизонтальным размещением своих гибких дочерних элементов.

Примечание: , если направление гибкости равно column , то justify-content будет управлять вертикальным размещением своих дочерних элементов flex.

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

При установке display: flex направление изгиба должно быть row . В этом случае align-items будет управлять вертикальным размещением своих дочерних элементов flex.

Примечание: , если направление изгиба равно column , то align-items будет управлять горизонтальным размещением своих дочерних элементов flex.

Центрирование с полем

До flexbox вы могли использовать margin: auto для центрирования элемента по горизонтали следующим образом:

html

css

Вертикальное + горизонтальное центрирование с Flexbox + Margin

Однако, если вы добавите в микс flexbox, вы сможете контролировать как горизонтальное, так и вертикальное выравнивание элемента.

Поле — это сокращение для установки поля в верхнем, левом, правом и нижнем направлениях. Это синтаксис:

Пример:

Горизонтальное центрирование с помощью Flexbox + Margin

Для управления горизонтальным центрированием. Нам нужно будет изменить поля left и right нашего дочернего элемента.

Вертикальное центрирование с Flexbox + Margin

Для управления горизонтальным центрированием. Нам нужно будет повлиять на поля top и down нашего дочернего элемента.

Чтобы узнать больше о том, как поля работают с Flexbox, вы можете прочитать урок из моего бесплатного курса Flexbox30, Flexbox: выравнивание с автоматическими полями

Margin vs Flex Parent Properties

Вы могли заметить, я применил margin к дочерний элемент. Это потому, что поле используется для управления конкретным дочерним элементом. Где justify-content и align-items являются родительскими свойствами, поэтому это повлияет на все вмещающие дочерние элементы.Мои примеры были единым элементом, так что это не имеет значения. Но когда у вас есть несколько элементов, вы заметите разные эффекты. Если вас это смущает, пожалуйста, ознакомьтесь с моим бесплатным курсом. И прежде чем вы столкнетесь с ладонью 🤦‍♀️, думая, что это будет долгое чтение. Судя по всему, вы можете пройти их за несколько минут 😂

@damafeez: Эти лакомые кусочки flexbox от @samantha_ming — отличный способ изучить CSS flexbox. Просто, информативно и прямо по делу. Просмотрите их всего за несколько минут.

Отладка фиксированной позиции с помощью Flex

Этот пример не обязательно относится к flexbox, но больше относится к позиции : fixed . Сообщество Twitter приняло участие в его отладке, поэтому я хотел включить его в примечания, так как некоторым из вас это может показаться интересным. Вы можете следить за исходной веткой Twitter здесь, @rapzzyofficial.

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

Однако, когда он добавляет position: fixed , все содержимое сжимается вместе, что ему не нужно.

Решение

Потому что position: fixed действует как изменение «блока» на «встроенный блок», когда он занимает всю строку до ширины содержимого. Чтобы исправить это, вы можете выполнить одно из следующих действий:

@ SelenIT2: Так ведут себя не только встроенные блоки, но и плавающие элементы и элементы вне потока, которыми на самом деле являются элементы с абсолютным / фиксированным позиционированием, а также сжиматься до ширины содержимого по умолчанию. width: 100% подойдет, как и left: 0; right: 0;

Ресурсы

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

Есть много способов центрировать объекты в CSS, но один из самых простых — использовать CSS Flexbox. CSS Flexbox — это модель макета, которая помогает выровнять однонаправленные элементы. В этом коротком посте мы рассмотрим, как центрировать элементы не только по горизонтали, но и по вертикали.

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

  

1

  раздел {
ширина: 200 пикселей;
граница: сплошная 1px # 2d2d2d;
}

div {
цвет: #fff;
фон: # 2d2d2d;
отступ: 12 пикселей;
дисплей: встроенный блок;
}

Чтобы центрировать внутренний элемент div , мы сделаем родительский элемент гибким контейнером.

  раздел {
ширина: 200 пикселей;
граница: сплошная 1px # 2d2d2d;
дисплей: гибкий;
justify-content: center;
}

Добавив дисплей : flex; , мы делаем элемент section гибким контейнером, позволяя нам настраивать макет div, который теперь является гибким элементом. Чтобы центрировать элемент по горизонтали, мы используем justify-content: center; . Свойство justify-content позволяет нам размещать элементы вдоль главной оси гибкого контейнера. Основная ось может изменяться в зависимости от направления изгиба.

Свойство justify-content также имеет start , end и stretch , которые могут позиционировать элементы вдоль главной оси.

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

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

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

  раздел {
ширина: 200 пикселей;
граница: сплошная 1px # 2d2d2d;
дисплей: гибкий;
justify-content: center;
align-items: center;
}

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

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

  

1

2

3

Посмотрите полную рабочую демонстрацию ниже и сосредоточьтесь на всех вещах!

Мои любимые способы горизонтального центрирования DIV

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

Очевидное: выравнивание текста

В простых случаях нам всем нравится это решение, устанавливая text-align: center для содержащего элемента. Проблема в том, что text-align работает только с inline-элементами , как в span s и div s, у которых их позиция установлена ​​на inline-block . Когда у вас возникла такая ситуация, это лучший вариант.

Маржа

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

Способ «когда-нибудь придет»

Тогда есть случай, когда ширина является динамической, а ваши элементы являются встроенными элементами. В таких случаях мне нравится безошибочный способ, который я называю «Дэйв Центрирование» (в честь друга, который меня этому научил).

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

Вот конечный продукт, а ниже объяснение деталей:

 1
2
3
4
5
 
  
По центру родительского
 1
2
3
4
5
6
7
8
9
10
11
12
13
 
  . parent {
    положение: относительное;
}

.parent .center-wrapper {
    позиция: абсолютная;
    осталось: 50%;
}

.parent .center-wrapper .center-content {
    положение: относительное;
    осталось: -50%;
}
  

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

Центр прочь!

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

Удачного кодирования!

«Поддержание AngularJS похоже на Cobol 🤷…»

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

Было бы здорово снова поработать над современной кодовой базой, но у кого есть недели на переписывание?
Что ж, вы можете вернуть свое приложение в форму, не отодвигая все сроки! Представьте, плавное обновление в соответствии с вашими обычными задачами, больше не унаследованное от прошлого.

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

Успех! Ты жжешь. Вы скоро получите некоторые знания, отправленные на ваш почтовый ящик. Давай сделаем это!

Как разместить элементы HTML бок о бок с помощью CSS | автор: Cem Eygi

Первый способ, которым вы можете воспользоваться, — это метод display: inline-block. Этот метод представляет собой простой и классический метод CSS для размещения элементов рядом.

Встроенный или блок?

Прежде чем использовать этот метод, важно понять, является ли этот элемент блочным (например,

,

) или встроенным (, ).

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

 div, span {
display: inline-block;
}

Что делает inline-block, так это размещает элементы бок о бок (например, встроенные элементы). Мы также можем назначать свойства ширины и высоты, как мы можем сделать для элементов уровня блока.

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

Стоит ли использовать поплавки?

Честно говоря, это зависит от вашего проекта. Если все, что вам нужно, — это разместить элементы рядом, используйте поплавки. Однако, если в вашем проекте используется современная техника (например, Flexbox, Grid или, возможно, фреймворк, например, Bootstrap и т. Д.), То использование float может быть не очень хорошей идеей.

Использование

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

 дел. {
с плавающей запятой: слева;
}

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

Чтобы предотвратить это, вы должны использовать свойство clear сразу после плавающих элементов.

 дел. {
ясно: оба;
}

Вы также можете посмотреть обучающее видео в этой публикации ниже:

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

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

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

 
class = "container" >

1


2


3


Затем, когда мы назначьте родительскому элементу (контейнеру) поведение display: flex, он автоматически разместит все свои дочерние элементы рядом:

 .container {
display: flex;
}

Кроме того, если вы добавите дочерние элементы к свойству flex и дадите номер (например, номер 1), все пространство будет разделено поровну:

 p {
flex: 1;
}

Flexbox значительно упрощает позиционирование элементов с помощью CSS, если у вас есть некоторое представление о том, как его использовать.

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

Прежде всего, как и в методе flexbox, элементы должны находиться внутри родительского контейнера:

 
class = "container" >

1


2 < / p>

3


После этого мы меняем свойство отображения родительского элемента (контейнера) на сетку:

. контейнер {
дисплей: сетка;
}

Далее нам нужно определить, как будет выглядеть макет. Мы можем решить, сколько столбцов и строк будет в нашем макете. Допустим, нам нужно три столбца для трех элементов, каждый из которых расположен в одном столбце и в одной строке. Чтобы разместить элементы рядом, мы определяем свойство grid-template-columns и делим пустое поле поровну, задав значение 1fr для каждого столбца:

 .container {
display: grid;
сетка-шаблон-столбцы: 1fr 1fr 1fr;

}

Примечание. fr означает дробную единицу пространства и аналогичен свойству flex для flexbox.

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

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

Наш ЛЮБИМЫЙ способ горизонтального центрирования в HTML и CSS

5 декабря 2014

Центрирование вещей всегда было для разработчиков постоянным компромиссом.На самом деле не существует универсального способа горизонтально центрировать объекты, который гарантированно работал бы при любых обстоятельствах. Вы пытаетесь центрировать один элемент? Есть несколько элементов? У них разная ширина? Должен ли он быть отзывчивым? Можете ли вы добавить классы к родительскому?

Один из моих любимых способов решить проблему горизонтального центрирования — установить для родительского CSS значение text-align: center и добавить display: inline-block для каждого дочернего элемента. Это особенно полезно, если у вас есть несколько элементов определенной или автоматической ширины, которые необходимо центрировать в пределах родительского элемента:

Действительно быстрый и простой способ сделать это требует всего лишь пары строк кода.

HTML:

CSS:

.circles-parent {выравнивание текста: центр; } .круг {фон: зеленый; радиус границы: 50%; дисплей: встроенный блок; маржа: 0 15 пикселей; }

.circles-parent {выравнивание текста: центр; }

.circle {background: green; радиус границы: 50%; дисплей: встроенный блок; маржа: 0 15px; }

Основными стилями, на которые следует обратить внимание, являются «выравнивание текста: центр» для родительского элемента и «отображение: встроенный блок» для кругов.

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