Css выравнивание div в div по вертикали: Центрирование горизонтальное и вертикальное

Содержание

Выравнивание 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 пикселей, тем самым форма начнет растягиваться по ширине и верстка макета будет полностью адаптивной.

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

css — Как выровнять div внутри другого div по вертикали?

Я хочу показать несколько элементов DIV (разной высоты) внутри другого DIV. И все эти DIV должны быть выровнены по вертикали TOP. Если вы измените размер контейнера DIV, то внутри DIV появится новая строка, а позиция второй строки начнется с самого большого DIV в предыдущей строке (см. Рисунок):

Это не похоже на работу:

.containerDiv{
    display: table-cell;
    vertical-align: top;
}

.insideDiv{
    text-align: center;
    display:inline-block;
}

1

VladP 21 Дек 2016 в 07:56

3 ответа

Лучший ответ

Flexbox идеально подходит для этого макета. Вот простой пример, который должен работать так, как вы планировали. Fiddle.

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

.container {
  border: 4px solid #000;
  display: flex;

  /* otherwise everything goes on one row */
  flex-wrap: wrap;
  
  /* Needed as otherwise it stretches to have evenly sized boxes on each row */
  align-items: flex-start;
}

.item {
  border: 4px solid #000;
  margin: 0.5em;
  
  /* can't use width: 150px, but in this case it acts as if we did. */
  min-width: 150px;
  
  /* This is needed to prevent the boxes from dynamically resizing. */
  /* alternatively: flex: 0 1 0; */
  flex-grow: 0;
  flex-basis: 0;
}
<div>
  <div>Words words words words words words words words words</div>
  <div> words words words words words words words words words words words words words words words words words words words words words words</div>
  <div> words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words</div>
  <div> words words words words words words words</div>
  <div>Words words words words words words words words words</div>
  <div> words words words words words words words words words words words words words words words words words words words words words words</div>
</div>

0

Gerrit0 21 Дек 2016 в 07:18

Попробуйте это, на экране размером больше 768 пикселей оба набора div выровнены друг с другом.

*{
  box-sizing:border-box;
}
.upperDiv{
  width:20%;
  background-color:red;
  float:left;
  height:100px;
  border:1px solid black;
}
.upperContain{
  width:100%;
  display:flex;
    margin:0;
  padding:0;
}
.lowerContain{
   width:100%;
  display:flex;
  margin:0;
  padding:0;
}

.lowerDiv{
  width:20%;
  background-color:green;
  height:100px;
  border:1px solid black;
  float:left;
}
@media (min-width:768px){
  .upperContain{
  width:50%;
  display:block;
    float:left;
}
.lowerContain{
   width:50%;
  display:block;
  float:left;
}
}
<div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

0

ab29007 21 Дек 2016 в 05:50

Попробуйте этот метод:

Css:

. main-container{
    border:solid 1px #000;
    position:relative;
    display: inline-flex;
    width: 250px;
    flex-wrap: wrap;
    justify-content:center;
    padding:20px 0;
}
.secondary-div{
    border:solid 1px #000;
    width:50px;
}

Html:

<div>
    <div>Div1</div>
    <div>Div2</div>
    <div>Div3</div>
    <div>Div4</div>
    <div>Div5</div>
    <div>Div6</div>
    <div>Div7</div>
    <div>Div8</div>
</div>

0

Angela Amarapala 21 Дек 2016 в 06:58

Выравнивание — блок по вертикали

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

И все благодаря CSS 3.

Помимо свойства display: table появилось есть свойство display: table-cell и именно комбинацию этих двух свойств мы будем использовать.

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

Выравнивание блока по вертикали, код HTML:

<div>

    <div>

        <div>Выравнивание — блок по вертикали</div>

    </div>

</div>

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

Выравнивание блока по вертикали, код CSS:

.main_block {

    display: table;

    width: 100%;

    height: 200px;

    background: #f00;

}

.main_block > div {

    display: table-cell;

    vertical-align: middle;

    background: #eee;

    height: 30px;

}

.block {

    background: #ccc;

}

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

Результат: блок по вертикали:


Разумеется, помимо этих основных моментов выровнять блок по вертикали потребуется еще указать высоту главного блока, если это будет необходимо. При данном варианте решения задачи выравнивания не придется «бороться» с Internet Explorer, как было бы, если бы использовалось свойство display:inline-block.

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

Грид, флексбокс и выравнивание блоков: наша новая система раскладки

Раскладка в вебе остается сложной. Причина этого состоит в том, что методы раскладки, которые мы используем с того момента, как раскладка средствами CSS стала возможной, не предназначались для создания чего-то сложного. Хотя мы можем сделать достаточно много, пока работаем с фиксированной шириной и используем хаки типа искуственных колонок, но эти методы разваливаются при отзывчивом дизайне. К счастью, у нас есть надежда в виде флексбокса, который многие уже знают и используют, а также менее известных технологий — CSS3 Grid Layout (далее грид) и модуля выравнивания блоков.

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

Примечание о поддержке в браузерах

На данный момент грид поддерживается при активации флага, а также в ночных сборках и сборках для разработчиков в Firefox, Safari, Chrome и Opera. Все, что вы увидите в статье, можно увидеть в работе, если вы активируете флаг или используете соответствующие сборки браузеров. Я стараюсь поддерживать в актуальном состоянии список поддержки грида в браузерах.

Новые значения свойства

display

И grid, и flexbox являются новыми значениями для свойства display. Чтобы сделать элемент флекс-контейнером, мы используем display: flex, аналогично, чтобы сделать грид-контейнер, мы используем display: grid.

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

display: flex

В первом примере у нас есть три элемента в контейнере, которому задано display: flex. Это все, что на нужно, чтобы начать использовать флекбокс.

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

  • flex-direction: row
  • flex-wrap: no-wrap
  • align-items: stretch
  • justify-content: flex-start

Начальные значения для флекс-элементов:

  • flex-grow: 0
  • flex-shrink: 1
  • flex-basis: auto

Мы взглянем на работу этих свойств и значений позднее. Сейчас нам достаточно задать родительскому элементу display: flex и флексбокс будет работать.

See the Pen Flexbox Defaults by rachelandrew (@rachelandrew) on CodePen.

display: grid

Для раскладки элементов по сетке мы используем display: grid. Чтобы увидеть поведение грида, в примере будет использована раскладка с пятью картами.

Добавление display: grid не вносит драматических изменений, однако дочерние элементы теперь стали грид-элементами. Они расположились в одноколоночной полосе сетки, один под другим, сетка создала неявные строки для каждого элемента.

See the Pen Grid Defaults by rachelandrew (@rachelandrew) on CodePen.

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

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

See the Pen Grid Columns by rachelandrew (@rachelandrew) on CodePen.

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

  • grid-auto-flow: row
  • grid-auto-rows: auto
  • align-items: stretch
  • justify-items: stretch
  • grid-gap: 0

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

Выравнивание блоков

В этих двух примерах мы уже встретились со значениями, определенными в модуле выравнивания блоков. “Box Alignment Module Level 3” по сути отвечает за все выравнивания и распределения пространства, определенные в спецификации флексбокса и делает их доступными для других модулей. Поэтому, если вы уже используете флексбокс, то вы используете и выравнивание блоков.

Посмотрим, как выравнивание блоков работает в флексбоксе и гриде, а также на те проблемы, которые мы решаем с его помощью.

Колонки одинаковой высоты

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

See the Pen Floated Columns by rachelandrew (@rachelandrew) on CodePen.

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

В примере с флексбоксом в наших элементах находится разное количество контента. Фон каждого из них выравнивается по линии, а не сидит за контентом, как это должно быть у плавающих элементов. Так как эти элементы выведены в ряд, их поведение контролируется свойством align-items. А для того, чтобы колонки были одинаковой высоты, значением этого свойства должно быть stretch — это начальное значение этого свойства.

See the Pen Flexbox Equal Height Columns by rachelandrew (@rachelandrew) on CodePen.

То же самое мы видим и с раскладкой на гриде. Ниже показана простейшая из раскладок — две колонки (основной контент и боковая). Я опять использую единицы измерения fr: боковая колонка получит значение 1, а основной контент — 3. Фоновый цвет в боковой колонке доходит до того же края, что и контент в основной колонке. Опять, дефолтным значением для align-items является stretch.

See the Pen Grid Equal Height Columns by rachelandrew (@rachelandrew) on CodePen.

Выравнивание в флексбоксе

Мы увидели, что значением по умолчанию для align-items в флексбоксе и гриде является stretch.

В флексбоксе при использовании align-items, мы выравниваем элементы внутри флекс-контейнера на пересекающихся осях. Основная ось определяется свойством flex-direction. В первом примере основной осью является ряд (горизонталь): мы растягиваем элементы на противоположной оси до высоты флекс-контейнера. В свою очередь высота флекс-контейнера это высота флекс-элемента с наибольшим количеством контента.

Увеличенная версия

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

Увеличенная версия

Вместо дефолтного значения stretch мы можем использовать и другие варианты:

  • flex-start
  • flex-end
  • baseline
  • stretch

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

  • flex-start
  • flex-end
  • center
  • space-around
  • space-between

Ключевые слова space-between и space-around особенно интересны. В случае со space-between, пространство оставшееся после укладки флекс-элементов равномерно распределяется между ними.

Увеличенная версия

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

Увеличенная версия

Вы можете увидеть работу этих свойств и значений в демо:

See the Pen Flexbox Alignment flex-direction: row by rachelandrew (@rachelandrew) on CodePen.

Мы также можем вывести флекс-элементы как колонку, а не как ряд. Если мы изменим значение flex-direction на column, то основной осью станет колонка, а ряд станет поперечной осью — align-items по-прежнему в значении stretch, а элементы растягиваются на ширину ряда.

Увеличенная версия

Если мы захотим выровнять их по началу флекс-контейнера, мы используем flex-start.

Увеличенная версия

See the Pen Flexbox Alignment flex-direction: column by rachelandrew (@rachelandrew) on CodePen.

Выравнивание в гриде

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

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

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

See the Pen Grid Alignment: align-items and justify-items by rachelandrew (@rachelandrew) on CodePen.

Точечная граница фонового изображения помогает нам увидеть заданные области. Так в первом примере, каждая область использует дефолтное значение stretch для align-items на оси колонки и justify-items на оси ряда. Это значит, что контент растягивается для полного заполнения области.

Увеличенная версия

Во втором примере, я изменила значение align-items в грид-контейнере на center. Мы также можем изменить это значение в отдельном грид-элементе при помощи свойства align-self. В этом случае, я задала значение center всем элементам , кроме второго, которому задано stretch.

Увеличенная версия

В третьем примере, я снова поменяла значения justify-items и justify-self , задав соответственно center и stretch.

Увеличенная версия

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

Мы также можем выравнивать всю сетку внутри контейнера, если наши полосы занимают меньше пространства, чем контейнер, которому задано display: grid. В этом случае мы можем использовать свойства align-content и justify-content, как и в случае с флексбоксом.

See the Pen Grid Alignment: aligning the grid by rachelandrew (@rachelandrew) on CodePen.

В первом примере мы видим выравнивание по умолчанию, при котором колонки и ряды задаются в абсолютных величинах и занимают меньше пространства, чем позволяет их контейнер фиксированной ширины. Дефолтное значение для обоих start.

Увеличенная версия

Чтобы сдвинуть полосы вправо вниз, мы изменим значение на end.

Увеличенная версия

Также как и с флексбоксом, мы можем использовать space-around и space-between. Это может повлечь поведение, которое может быть нежелательным для нас, так как отступы в сетке станут шире. Однако, как вы можете видеть на изображении ниже и в третьем примере на Codepen, мы получаем те же отступы между полосами, которые у нас были с флексбоксом.

Увеличенная версия

Полосы фиксированного размера получают дополнительное пространство, если они охватывают больше одной полосы. Элементы #2 и #4 в нашем примере шире, а #3 выше, так как они получили дополнительное пространство, которое предназначалось промежутку между полосами.

Мы можем полностью центрировать грид, задав align-content и justify-content значение center, как показано в последнем примере.

Увеличенная версия

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

Отзывчивость по умолчанию

В последнем разделе мы рассмотрели выравнивание. Свойства выравнивания блоков, используемые в раскладках на основе флексбокса и грида это одна из областей, где мы видим, что эти спецификации возникли в мире, где отзывчивый дизайн является общим принципом. Значения типа space-between, space-around и stretch позволяют добиться отзывчивости и равного распределения содержимого между элементами.

Однако здесь есть нечто большее. Отзывчивый дизайн часто заключается в сохранении пропорций. Когда мы рассчитываем колонки для отзывчивого дизайна, используя подход target ÷ context, представленный в статье Этана Маркотта “Fluid Grids”, мы поддерживаем пропорции оригинального дизайна в абсолютных величинах. Флексбокс и грид дают нам более простые способы работы с пропорциями в нашем дизайне.

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

  • flex-grow
  • flex-shrink
  • flex-basis

Эти три свойства чаще указываются в короткой записью свойства flex. Если мы добавляем элементу flex: 1 1 300px, мы указываем, что свойство flex-grow равно 1, то есть этот элемент может расширяться; flex-shrink равно 1, это позволит элементам уменьшаться, а flex-basis равен 300 пикселям. Применение этих правил к нашей карточной раскладке даст следующий результат:

See the Pen Flexbox: flex properties by rachelandrew (@rachelandrew) on CodePen.

Наш flex-basis равен 300 пикселям и у нас три карты в ряду. Если флекс-контейнер шире 900 пикселей, тогда оставшееся пространство делится на три и распределяется поровну между элементами. Это потому что мы задали flex-grow равный 1 и наши элементы могут расти больше, чем задано flex-basis. Мы также задали flex-shrink равный 1, а это значит, что если у нас не хватит места для трех колонок по 300 пикселей, их размер будет уменьшаться в равных долях.

Если мы хотим, чтобы эти элементы росли в разных пропорциях, тогда нам нужно изменить значение flex-grow у одного или нескольких элементов. Если мы захотим, чтобы первый элемент занял втрое больше доступного пространства, то мы зададим flex-grow: 3.

See the Pen Flexbox: flex properties by rachelandrew (@rachelandrew) on CodePen.

Доступное пространство распределяется после того, как выделено место в соответствии с заданным flex-basis. Именно поэтому наш первый элемент не стал в три раза больше остальных, а просто занял три части оставшегося пространства. Вы увидите большее изменение, если зададите flex-basis:0, в таком случае у нас не будет стартового значения, которое мы вычитаем из ширины контейнера. Соответственно, вся ширина контейнера будет распределена между элементами пропорционально.

See the Pen Flexbox: flex properties by rachelandrew (@rachelandrew) on CodePen.

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

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

В следующем примере, я задала всем картам flex-basis: auto, а затем первой из них ширину в 350 пикселей. Таким образом flex-basis этой первой карты теперь равен 350 пикселям, у двух других он определяется шириной контента.

See the Pen Flexbox: flex properties by rachelandrew (@rachelandrew) on CodePen.

Если мы вернемся к нашему оригинальному flex: 1 1 300px, добавим еще элементов и зададим flex-wrap: wrap контейнеру, элементы будут укладываться настолько близко, насколько это можно при заданном значении flex-basis. Если у нас 5 изображений и 3 из них укладываются в один ряд, тогда оставшиеся 2 будут выведены на следующем. Так как элементам позволено расширяться, оба перенесенных элемента вырастут в равной мере и мы получим 2 равных увеличенных элемента снизу и 3 равных элемента сверху.

See the Pen Flexbox: wrapping by rachelandrew (@rachelandrew) on CodePen.

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

Сохранение пропорций с помощью грид-раскладки

Грид, как мы уже видели обладает концепцией создания полос колонок и рядов, в которых позиционируются элементы. Когда мы создаем гибкую грид-раскладку, мы задаем пропорции при задании полос в грид-контейнере — именно полос, а не элементов, как в флексбоксе. Мы уже сталкивались со специальной единицей fr, когда создавали раскладку на гриде. Эта единица работает примерно также как flex-grow при flex-basis:0. Она распределяет доли доступного пространства в грид-контейнере.

В следующем примере кода, первой полосе колонок было задан 2fr, двум другим 1fr. Таким образом, мы делим пространство на четыре части и даем две части первой полосе и по одной двум оставшимся.

See the Pen Simple grid show fraction units by rachelandrew (@rachelandrew) on CodePen.

Смешивание абсолютных единиц измерения и fr валидно. В следующем примере у нас будет полоса 2fr, полоса 1fr и полоса в 300 пикселей. Сначала вычитается абсолютная величина для третьей полосы, а затем оставшееся пространство делится на три, две части идут в первую полосу, а оставшаяся во вторую.

See the Pen Grid: Mixing absolute and fraction units by rachelandrew (@rachelandrew) on CodePen.

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

Хорошо то, что у нас по-прежнему есть способ создать столько колонок определенной величины, сколько влезет в контейнер. Мы можем сделать это с помощью синтаксиса grid и repeat.

В следующем примере я буду использовать синтаксис repeat для создания максимального количества двухсотпиксельных колонок, помещающегося в контейнере. Я использую синтаксис repeat для перечисления полос с ключевым словом auto-fill и задаваемым им размером.

На момент написания это не было имплементировано в Chrome, но работало в версии Firefox для разработчиков.

See the Pen Grid: As many 200 pixel tracks as will fit by rachelandrew (@rachelandrew) on CodePen.

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

See the Pen Grid: As many 200 pixel tracks as will fit, distribute remain space evenly by rachelandrew (@rachelandrew) on CodePen.

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

Разделение порядка в разметке и визуального порядка элементов

С флексбоксом мы можем делать многое в плане позиционирования флекс-элементов. Мы можем выбрать направления, в котором они обтекают, задав flex-direction в значение row, row-reverse или column, column-reverse и мы можем задать порядок, контролирующий порядок вывода элементов.

See the Pen Flexbox: order by rachelandrew (@rachelandrew) on CodePen.

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

Свойства grid-column и grid-row являются краткой записью следующего набора свойств: grid-column-start, grid-row-start, grid-column-end и grid-row-end. Значение перед / это линия, с которой начинается контент, а значение после — линия, на которой контент заканчивается.

See the Pen Grid: line-based positioning by rachelandrew (@rachelandrew) on CodePen.

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

See the Pen Grid: line-based positioning, named lines by rachelandrew (@rachelandrew) on CodePen.

У вас может быть несколько линий с одним именем и вы можете указывать их с помощью имени и индекса.

Вы можете использовать ключевое слово span, охватывая указанное число линий, например, до третьей линии с именем col. Этот тип позиционирования полезен для использования компонентов, размещающихся в разных местах раскладки. В примере ниже, я хочу чтобы некоторые элементы разместились на 6 полосах колонок, а оставшиеся заняли бы три полосы. Я использую авторазмещение для раскладки элементов, но когда грид встречает элемент с классом wide, стартовое значение будет auto, а конечное span 2; таким образом он начнется там, где и должен начать автоматически, но затем охватит две линии.

See the Pen Grid: multiple lines with the same name by rachelandrew (@rachelandrew) on CodePen.

Использование авторазмещения с несколькими подобными правилами может оставить пробелы в вашей стеке, также в сетке могут появится элементы требующие двух полос при наличии только одной. По умолчанию грид продвигает вперед, поэтому как только она оставит пробел, она не будет возвращаться, чтобы заполнить его — если мы только не зададим grid-auto-flow: dense, в этом случае грид будет возвращаться для заполнения пробелов, беря контент в DOM-порядке.

See the Pen Grid: grid-auto-flow: dense by rachelandrew (@rachelandrew) on CodePen.

Также есть отдельный метод позиционирования элементов в грид-раскладке — путем создания визуального представления раскладки напрямую в свойстве grid-template-areas. Для этого вам сначала надо присвоить имена всем прямым потомкам грид-контейнера, которые вы хотите позиционировать.

Затем мы располагаем элементы в манере ASCII-арта, указывая значение grid-template-areas. Если вы хотите полностью изменять раскладку с помощью медиазапросов, вам достаточно изменить только это свойство.

See the Pen Grid: template areas by rachelandrew (@rachelandrew) on CodePen.

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

Последствия переупорядочения для доступности.

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

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

И предупреждение в спецификации грида:

Грид-раскладка дает авторам возможность перестановки по всему документу. Однако это не является заменой корректной разметке исходников документа. Свойства упорядочивания и размещения по сетке не затрагивают невизуальные медиа (такие как речь). Кроме того, визуальное изменение порядка грид-элементов не влияет порядок прохода по ним в режиме последовательной навигации (например, по ссылкам).

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

Новая система для раскладки

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

В настоящий момент флексбокс работает во всех основных браузерах, в то время как грид под флагом работает в Chrome, Opera, Safari и Firefox. Флексбокс изначально работал с префиксной версией, которая использовалась разработчиками, но затем он изменился, оставив нас с ощущением, что мы не можем полагаться на него. Грид разрабатывался под флагом и если вы посмотрите примеры в статье с активированным флагом, вы заметите, что имплементации уже очень совместимы. На данный момент спецификация находится в статусе кандидата в рекомендации. Поэтому когда грид выйдет в работу (это ожидается в начале следующего года) у него будет солидная кроссбраузерная поддержка.

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

Ресурсы

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

полное руководство — Дневник верстальщика

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

ЦЕНТРИРОВАНИЕ ПО ГОРИЗОНТАЛИ

Центрирование по горизонтали inline-* элементов (текст или ссылки)

Для того чтоб отцентрировать текст или ссылку, достаточно родительскому элементу указать свойство text-align:center; и тогда все inline-* элементы будут отцентрированы, давайте посмотрим пример:

.center {

  text-align: center;

}

В примере ниже мы видим что родительский блок получает class=»center» а в самом CSS мы этому класу присвоили значение text-align:center; но не забываем что это работает только для инлайновых элементов.

See the Pen Inline text center by Denis Koblya (@denis-koblya) on CodePen.dark

 

Центрирование блочного элемента

Для того чтоб сделать так чтоб блочный элемент (display: block;) был по центру его родителя, мы должны прописать для него свойства margin-left: auto; и margin-right: auto; либо сохратить эту запись как margin: 0 auto; и добавить ему ширину width.

.block-center{

margin: 0 auto;

width: 150px;

}

Давайте рассмотрим пример, так как у нас элемент это DIV, он автоматически является блочным элементом (display: block), для того чтоб выровнять блок DIV по центру (черный квадрат) мы для него прописали два свойства: margin и width. ВНИМАНИЕ: без свойства width это не сработает!

See the Pen CSS BLOCK CENTER by Denis Koblya (@denis-koblya) on CodePen.dark

 

Центрирование элементов при помощи flexbox

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

.flex-center{

  display:flex;

  justify-content: center;

}

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

See the Pen FLEXBOX FLEX CENTER by Denis Koblya (@denis-koblya) on CodePen.dark

 

ЦЕНТРИРОВАНИЕ ПО ВЕРТИКАЛИ

Центрирование по вертикали inline-* элементов (текст или ссылки)

Для того чтоб отцентрировать текст или ссылку по горизонтальному центру блока, мы можем прибегнуть к такому лайфхаку как одинаковые padding сверху и снизу

В примере ниже я выставлю несколько ссылок в ряд и задам для них внутренние отступы сверху и снизу

See the Pen VERTICAL CENTER PADDING by Denis Koblya (@denis-koblya) on CodePen.dark

Также можно отцентрировать элемент по вертикали другим способом, задав одинаковую высоту блока и его line-height (но это сработает только если у вас текст в одну линию)

.center-text{

  height: 100px;

  line-height: 100px;

}

Данным методом можно легко пользоваться например для ссылок в меню или короткого текста, именно короткого, так как если текста будет больше чем ширина блока, он перенесется на следующую строку и уже будет выпадать за блок, можете протестировать сами дописав больше текста. Для запрета переноса текста добавьте в стили блока свойство white-space: nowrap;

See the Pen VERTICAL ALIGN LINE-HEIGHT by Denis Koblya (@denis-koblya) on CodePen.dark

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

.center-table {

  display: table;

  height: 250px;

}

.center-table p {

  display: table-cell;

  vertical-align: middle;

}

See the Pen VERTICAL ALIGN DISPLAY TABLE by Denis Koblya (@denis-koblya) on CodePen.dark

Теперь перейдем к способу центрирования по вертикали при помощи flexbox, для этого мы родителю дадим свойства display: flex; и justify-content: center; а также добавим свойство flex-direction: column;

.flex-center-vertically {

  display: flex;

  justify-content: center;

  flex-direction: column;

 

  height: 200px;

  width:200px;

}

Что мы сделали? Мы родительскому элементу задали свойство display:flex; затем свойством flex-direction: column; сказали что все элементы внутри него выстроить в колонку, а через justify-content: center; мы сказали что поставить наш параграф по центру.

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

See the Pen Flexbox vertical center by Denis Koblya (@denis-koblya) on CodePen.dark

Если вы знаете высоту элемента

Зачастую высота элемента у нас не бывает фиксированной, например у вас есть текст который на дескотпе помещается в две строчки, а на планшете уже 3-4 строчки, но если вы используете элемент высота которого должна быть неизменна, то ловите следующий лайфхак по вертикальному центрированию блока:

.parent {

  position: relative;

}

.child {

  position: absolute;

  top: 50%;

  height: 100px;

  margin-top: -50px;

}

На примере ниже вы можете видеть что родительский клас имеет высоту и свойство position:relative; для того чтоб дочерний элемент мог применить свойство position: absolute; затем мы говорим ему отступить от верха 50% свойством top: 50%; задаем ему фиксированную высоту 200px и так как мы знаем высоту (100px), мы отступаем отрицательным отступом вверх на половину нашей высоты margin-top:-50px;

See the Pen Absolute center align by Denis Koblya (@denis-koblya) on CodePen.dark

Если мы не знаем высоту элемента

Если мы не знаем нашу высоту как в предидущем примере, мы должны повторить все тоже самое, только вместо отрицательного отступа, мы должны применить свойство transform: translateY(-50%);

.parent {

  position: relative;

}

.child {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

}

Рассмотрим пример

See the Pen Vertical align transform by Denis Koblya (@denis-koblya) on CodePen.dark

 

 

 

 

центрирование текста по вертикали в логотипе – Zencoder

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

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

Необходимо сделать также, как и на psd-макете. Чтобы текст располагался по-вертикали по-центру, и был смещен при этом вправо. Часть html-кода, в котором создается логотип со ссылкой, показана ниже:

С установкой фонового изображения проблем не возникает. Задаю ширину и высоту для блока h2 равной ширине и высоте логотипа. И прописываю для него картинку в качестве фона.

Текст-ссылку внутри блока также стилизую в соотвествии с тем, как она изображена на макете. А вот центрование текста — здесь есть некоторая тонкость. Спасибо SelenIT, что кратко и точно объяснил, как поступать в данном случае.

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

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

Осталось сместить текст вправо на заданную величину. Это выполняется с помощью правила .

Ниже привожу кусок кода, отвечающего за стилизацию логотипа сайта:

.logo{
  background: url(../img/logo.gif) 0 0 no-repeat;
  height: 100px;
  width: 180px;
  display: table; /*!*/

}
.logo a{
  font-family: 'webfontbold';
  font-weight: bold;
  font-size: 20px;
  color: #090909;
  text-transform: uppercase;
  text-decoration: none;
  display: table-cell; /*!*/
  vertical-align: middle; /*!*/
  padding-left: 80px;
}

Вот задача и решена. Разобрался с центрирование текста по-вертикали с помощью правил , , .

На этом все.


css

Ширина (width) и высота (height) в HTML

В этой статье рассмотрим, как можно задавать ширину и какими свойствами стоит делать это. Для первого примера возьмём блочный элемент div. По умолчанию он имеет высоту равную нулю (если ничего не содержит) и занимает 100% ширины родительского элемента. Попробуем задать ему ширину в 200 пикселей и высоту в 150. Для этого используем CSS свойства width (ширина) и height (высота):
<div></div>
Получится такой результат:
Можно задавать ширину не только в пикселях, но и в процентах от ширины родительского элемента. Попробуем сделать это: 
<div></div>
Получится такой результат:
К сожалению, задать высоту для блочного элемента в процентах не получится. Если написать «height:50%;», то в разных браузерах будет диаметрально противоположный результат, поэтому лучше считать такую запись ошибкой.
Только у одного элемента можно задать свойство height в процентах, а точнее у псевдоэлементов :before и ::after. Читайте о них в статье Псевдоэлементы (:before, ::after) 

Максимальная и минимальная ширина (max-width и min-width)

Жёсткое ограничение ширины — это не лучший способ строить сайт. Потому что в таком случае появятся проблемы с адаптацией под мобильные и планшеты: ширина экрана может быть меньше ширины блока. Тогда часть сайта будет выходить пределы вёрстки сайта и появится горизонтальная прокрутка, чего у версии сайта на мобильном быть не должно. Поэтому вместо жёсткого задания ширины используется ограничение сверху через CSS свойство max-width. Мы знаем, что блочный элемент div пытается занять всю ширину родительского элемента, как будто по умолчанию у него есть свойство width и оно имеет значение 100%.
<div></div>
Результат будет аналогичен предыдущему примеру:
Но теперь, если вы возьмёте окно своего браузера и сузите до 400 пикселей и меньше, то увидите как контейнер div уменьшает свои размеры, чтобы не выпрыгивать за пределы вёрстки. Если же изменить «max-width:400px;» на «width:400px», то блок будет выходить за пределы родительского элемента:
По смыслу свойство min-width является диаметрально противоположным к max-width. Оно ограничивает минимальную ширину элемента, но не ограничивает максимальную.

Максимальная и минимальная высота (max-height и min-height)

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

Рассмотрим наглядный пример необходимости использования max-height. Допустим, что нам надо сделать чат, где пользователи сайта смогут обмениваться текстовыми сообщениями. Для этого нужно создать контейнер, который будет расти по мере появления в нём новых сообщений. Но как только div достигает определённой высоты, то перестаёт расти и появится полоса прокрутки. Используем следующий CSS код:

<div  contenteditable="true">
   Тише, мыши, кот на крыше,
   а котята ещё выше.
   Кот пошёл за молоком,
   а котята кувырком.
   Кот пришёл без молока,
   а котята ха-ха-ха. 
</div>
Весь текст не вместится в div. Поэтому из-за свойства «overflow-y: scroll;» появится полоса прокрутки:

Тише, мыши, кот на крыше, а котята ещё выше. Кот пошёл за молоком, а котята кувырком. Кот пришёл без молока, а котята ха-ха-ха.

Благодаря атрибуту contenteditable=»true» у тега div в примере, Вы можете изменить текст внутри контейнера. Попробуйте удалить и добавить несколько строк. Размер контейнера будет подстраиваться под количества текста в нём до тех пор, пока не станет быть равен 100px. Затем появится полоса прокрутки.

По смыслу свойство min-height является диаметрально противоположным к max-height. Оно ограничивает минимальную высоту элемента, но не ограничивает максимальную.

Выравнивание элементов в контейнере Flex — CSS: каскадные таблицы стилей

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

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

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

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

  • justify-content — контролирует выравнивание всех элементов по главной оси.
  • align-items — контролирует выравнивание всех элементов по поперечной оси.
  • align-self — контролирует выравнивание отдельного гибкого элемента по поперечной оси.
  • align-content — описывается в спецификации как «гибкие линии упаковки»; контролирует расстояние между гибкими линиями на поперечной оси.
  • gap , column-gap и row-gap — используются для создания промежутков или промежутков между гибкими элементами.

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

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

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

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

Мы можем использовать другие значения для управления выравниванием элементов:

  • align-items: flex-start
  • align-items: гибкий конец
  • align-items: center
  • align-items: stretch
  • align-items: baseline

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

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

align-self

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

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

Изменение главной оси

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

Если мы изменим наш flex-direction на столбец, align-items и align-self выровняют элементы слева и справа.

Вы можете попробовать это в примере ниже, в котором есть гибкий контейнер с flex-direction: column , но в остальном он точно такой же, как в предыдущем примере.

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

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

Свойство 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: равномерно (не определено в спецификации Flexbox)

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

Попробуйте другие значения, чтобы увидеть, как работает свойство align-content .

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

Примечание : значение равномерно по пространству не определено в спецификации 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: центр
  • justify-content: space-between
  • justify-content: space-around
  • justify-content: равномерно (не определено в спецификации Flexbox)

В приведенном ниже примере значение justify-content — это пробел между .Доступное пространство после отображения элементов распределяется между элементами. Левый и правый элемент выстраиваются на одном уровне с началом и концом.

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

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

Помните, что при всех этих методах выравнивания значения flex-start и flex-end учитывают режим записи.Если значение justify-content равно start , а режим записи — слева направо, как в английском языке, элементы выстраиваются в линию, начиная с левой стороны контейнера.

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

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

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

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

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

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

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

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

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

Вместо этого мы можем нацелить элемент 4 и отделить его от первых трех элементов, присвоив ему значение margin-left , равное auto .Автоматические поля будут занимать все пространство, которое они могут по своей оси — так работает центрирование блока с автоматическим левым и правым полем. Каждая сторона пытается занять как можно больше места, поэтому блок выталкивается в середину.

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

Чтобы создать разрыв между элементами гибкости, используйте свойства gap , column-gap и row-gap .Свойство column-gap создает промежутки между элементами на главной оси. Свойство row-gap создает промежутки между гибкими линиями, если для flex-wrap установлено значение wrap . Разрыв Свойство — это сокращение, которое устанавливает оба вместе.

Вертикальное центрирование — Решено с помощью Flexbox — Чистый, свободный от взлома CSS

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

Что еще хуже, так это методы, которые работают для вертикального центрирования, неясны и не интуитивно понятны, в то время как очевидные варианты (например, vertical-align: middle ) никогда не работают, когда они вам нужны.

Текущий ландшафт вариантов вертикального центрирования варьируется от отрицательных полей до display: table-cell до нелепых хаков с использованием псевдоэлементов полной высоты. Тем не менее, несмотря на то, что эти методы иногда помогают, они работают не во всех ситуациях.Что, если объект, который вы хотите центрировать, имеет неизвестные размеры и не является единственным дочерним элементом своего родителя? Что, если бы вы могли использовать взлом псевдоэлементов, но вам нужны эти псевдоэлементы для чего-то еще?

С Flexbox вы можете не беспокоиться. Вы можете безболезненно выровнять что угодно (по вертикали или горизонтали) с помощью свойств align-items , align-self и justify-content .

Я в центре!

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

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

HTML

  

CSS

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

.Aligner-item {
  максимальная ширина: 50%;
}

.Aligner-item - top {
  выровнять себя: гибкий старт;
}

.Aligner-item - bottom {
  align-self: гибкий конец;
}
  

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

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

Как вертикально выровнять элементы в Div

Иногда центрирование элементов по вертикали с помощью CSS может вызвать некоторые проблемы. Однако есть несколько способов центрировать элементы в

.

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

Создать HTML¶

  • Создайте два блока со следующим идентификатором: «синий» и «зеленый».
  

  
     Название документа 
  
  
     

Вертикально выровненный элемент

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

Добавьте CSS¶

Для блочных элементов вертикальное выравнивание элементов затруднено и зависит от ситуации.Если дочерний элемент может иметь фиксированную высоту, вы можете добавить position: absolute и указать его верх, высоту, верхнюю границу, положение.

  • Используйте свойство position с «относительным» значением для родительского элемента, чтобы разместить его относительно его нормального положения.
  • Используйте свойство position с «абсолютным» значением для дочернего элемента, чтобы разместить его относительно позиционированного родительского элемента.
  • Добавьте свойства высоты, верхнего края, верха, границы и ширины.
  #blue {
  положение: относительное;
}

#зеленый {
  позиция: абсолютная;
  верх: 50%;
  высота: 100 пикселей;
  маржа сверху: -50 пикселей;
}

#синий {
  граница: 2px solid # 1C87C9;
  высота: 10em;
}

#зеленый {
  граница: 1px solid # 8EBF42;
  ширина: 100%;
}  

Вот результат нашего кода.

Пример выравнивания элемента по вертикали в div с помощью свойства position: ¶

  

  
     Название документа 
    <стиль>
      #синий {
        положение: относительное;
      }
      #зеленый {
        позиция: абсолютная;
        верх: 50%;
        высота: 100 пикселей;
        маржа сверху: -50 пикселей;
      }
      #синий {
        граница: 2px solid # 1C87C9;
        высота: 10em;
      }
      #зеленый {
        граница: 1px solid # 8EBF42;
        ширина: 100%;
      }
    
  
  
     

Вертикально выровненный элемент

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

Результат¶

Другой метод — использовать свойство line-height со значением, равным свойству height.Это метод, который следует использовать, когда центрированный элемент состоит из одной строки, а высота его родительского элемента является фиксированной.

Пример выравнивания элемента по вертикали в div с помощью свойства line-height: ¶

  

  
     Название документа 
    <стиль>
      п {
        маржа: 0;
      }
      #outer {
        граница: 2px solid # 5c34eb;
        высота: 100 пикселей;
        высота строки: 100 пикселей;
      }
    
  
  
     

Вертикально выровненный элемент

Lorem Ipsum

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

Давайте посмотрим, как мы можем выровнять элемент в div с помощью свойства padding.Чтобы этот метод работал, нам нужно установить верхнее и нижнее отступы для внешнего элемента.

Пример выравнивания элемента по вертикали в div с помощью свойства заполнения CSS: ¶

  

  
     Название документа 
    <стиль>
      .center {
        отступ: 60 пикселей 0;
        граница: 2px solid # 5c34eb;
      }
    
  
  
     

Вертикально выровненный элемент

Lorem Ipsum.

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

Есть еще один метод выравнивания элементов по вертикали. Вы можете использовать свойство vertical-align, которое обычно применяется к элементам inline, inline-block и table-cell. Но его нельзя использовать для выравнивания элементов блочного уровня по вертикали. Раньше он использовался с атрибутом valign, но теперь этот атрибут устарел. Вместо этого вы можете использовать vertical-align: middle.

Как выровнять текст по вертикали по центру в DIV с помощью CSS

Тема: HTML / CSSPrev | След.

Ответ: используйте свойство CSS

line-height

Если вы попытаетесь выровнять текст по вертикали по центру внутри div с помощью правила CSS vertical-align: middle; у вас не получится.Предположим, у вас есть элемент div с высотой 50 пикселей , и вы разместили ссылку внутри div, которую хотите выровнять по вертикали по центру. Самый простой способ сделать это — просто применить свойство line-height со значением, равным высоте div, которое составляет 50px .

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

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

  



 Вертикально центрировать текст с помощью CSS 
<стиль>
    .меню{
        высота: 20 пикселей;
        высота строки: 20 пикселей;
        отступ: 15 пикселей;
        граница: 1px solid # 666;
    }



    

  

Связанные вопросы и ответы

Вот еще несколько часто задаваемых вопросов по этой теме:

Как вертикально выровнять плавающие элементы по центру с помощью Flexbox

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

Рассмотрим следующую ситуацию:

  1. Вы работаете с сеткой, в которой для создания столбцов используются числа с плавающей запятой. Подумайте о Bootstrap, Foundation, Skeleton, Susy или о любом другом.
  2. У вас есть два столбца с динамическим содержимым, смежные друг с другом, и вы не знаете размер содержимого столбца или какой столбец будет выше.
  3. Вам необходимо выровнять два столбца по центру по вертикали.

Наш желаемый макет будет выглядеть так:

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

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

Можно просто использовать «vertical-align: middle»?

К сожалению, нет, по нескольким причинам.

Во-первых, как указано в документации CSS: « Свойство CSS vertical-align определяет вертикальное выравнивание встроенного поля или поля таблицы-ячейки. ”Наши элементы не являются встроенными, встроенными блоками или ячейками таблицы, поэтому это правило не будет работать без изменения наших стилей отображения.

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

Хотя первую проблему можно решить, изменив правило « display », сделав столбцы « inline-block » или « table-cell », не существует метода CSS, который решает вторую проблему. Нам нужно будет удалить правила с плавающей запятой, которые будут мешать работе базовой сетки.

Flexbox спешит на помощь

Как обычно, у Flexbox есть простое решение нашей проблемы.Вот это в два простых шага:

  1. Добавьте « display: flex » к нашему элементу контейнера.
  2. Добавьте ‘ align-items: center ’ к нашему элементу-контейнеру.

Вот и все! Вот как могут выглядеть HTML и CSS для нашего упрощенного примера:

 
[Динамическое содержание]
[Динамическое содержание]

[Динамическое содержание]
[Динамическое содержание]

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

.column-1,
.column-2 {
  плыть налево;
  ширина: 50%;
}  

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

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

Помощников — Материализовать

Выравнивание

У нас есть простые в использовании классы, которые помогут вам согласовать ваш контент.

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

Вы можете легко центрировать объекты по вертикали, добавив класс valign-wrapper в контейнер, содержащий элементы, которые вы хотите выровнять по вертикали.

Это должно быть выровнено по вертикали

 
Это должно быть выровнено по вертикали

Выравнивание текста

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


Выровнять по левому краю


Выровнять по правому краю


Это должно быть выровнено по центру

 
  
Выровнять по левому краю
Выровнять по правому краю
Выровнять по центру

Quick Floats

Быстро перемещайте объекты, добавляя к элементу класс слева или справа .! Important используется, чтобы избежать проблем со специфичностью.

 
...
...

Форматирование

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

Усечение

Чтобы обрезать длинные строки текста в виде многоточия, добавьте класс truncate к тегу, содержащему текст. См. Ниже пример усечения заголовка внутри карточки.

Это очень длинный заголовок, который будет усечен

 
   
Это очень длинный заголовок, который будет обрезан

Ховер

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

Название карты

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

 
  
Панель Hoverable Card

Как центрировать div (по вертикали и горизонтали, IE8 +)

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

  1. Полная кроссбраузерность. Работает во всех браузерах (IE8 и выше).
  2. Полностью жидкая, размер div не требуется
  3. Абсолютно чисто, никаких хитростей. Весь код используется так, как должен.

Метод 1:


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

УСС

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

HTML

 
контент контент контент
муооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооо
другой контент

Результат

См. JSFiddle здесь: http: // jsfiddle.net / panique / pqDQB / 35/

Метод 2:


Центрировать div по вертикали и горизонтали внутри другого div

Это очень полезно в ситуации, когда вам нужно центрировать контент внутри div, который не имеет определенного размера в пикселях. Обратите внимание, что на самом деле это не требует НИКАКОГО определения размера в пикселях. В демонстрационных целях мы указываем размеры пикселей родительского div demo, просто чтобы создать наглядный пример.

УСС

 .parent {
    дисплей: таблица;
    / * необязательно, только для демонстрации * /
    высота: 300 пикселей;
    фон: желтый;
}
.ребенок {
    дисплей: таблица-ячейка;
    вертикальное выравнивание: по центру;
    / * необязательно, только для демонстрации * /
    фон: красный;
}
.содержание {
    / * необязательно, только для демонстрации * /
    фон: синий;
} 

HTML

Результат

См.

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

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