wwwoldi.ru

About Me

Dashy

Hello word I am dashy Guy

Разное

Выравнивание по центру css по вертикали: Центрирование горизонтальное и вертикальное

alexxlab
No Comments

Содержание

Как выровнять DIV по вертикали и горизонтали по центру

Может ли кто-нибудь помочь мне заставить div id «loader» плавать в центре div class «Window». Спасибо.

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

UPDATE* мне нужно центрировать его в абсолютной середине блока. Допустим, класс «Window» был высотой 400 пикселей. Как мне заставить «загрузчик» плавать в центре (height/width) этого?

css

Поделиться

Источник


Joe    

22 февраля 2012 в 17:19

5 ответов

  • Как выровнять текст по центру в div

    Я хотел бы выровнять текст по центру как по вертикали, так и по горизонтали внутри этого div. Таким образом, он имеет равное заполнение сверху и снизу. Как мне это сделать с моим текущим кодом? мой Fiddle: http://jsfiddle.net/hr2aLrc0 / <div…

  • Как вы выравниваете div по горизонтали и вертикали?

    Я хотел бы горизонтально и вертикально выровнять следующий div по центру страницы. Мне удалось выровнять его по горизонтали к центру, но не по вертикали. Как я могу это сделать? http://www.brennanpringle.com/кошка.html


6

Примените следующие CSS к «loader»:

  • положение: относительное
  • топ: 50%
  • маржа: — {E}px auto auto auto

где {E} — половина высоты «loader»

Надеюсь, это поможет.

Поделиться


SenorAmor    

22 февраля 2012 в 17:29


3

#someid.Window{
   // give this some width
   width: 100%
}

#loader{
    // give width and margin auto on the sides
    width: 100px;
    margin: 0 auto;
}

Поделиться


driangle    

22 февраля 2012 в 17:21


0

http://jsfiddle.net/sfKR2/

#someid {
    width:200px;
    height:200px;
}
#loader {
    position: relative;
    height:80px;
    width: 80px;
    top: 50%;
    margin-top: -40px; /* half of the height */
    margin-left: auto;
    margin-right: auto;
}

​

Поделиться


Fabian Leutgeb    

22 февраля 2012 в 17:22


0

напиши это:

.window{
    height:400px;
    width:400px;
    background:red;
    vertical-align:middle;
    line-height:400px;
    text-align:center;
}
#loader{
    width:20px;
    height:20px;
    background:green;
    display:inline-block;
    vertical-align:middle;
}

Проверьте это http://jsfiddle.net/dxPfz/

Поделиться


sandeep    

22 февраля 2012 в 17:33


0

Добавьте это к вашему css:

#loader {
  width: 123px;
  margin:0 auto;
}

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

Поделиться


Bruno Silva    

22 февраля 2012 в 17:21

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

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

У меня есть div, где я пытаюсь выровнять текст и изображение по центру как по вертикали, так и по горизонтали. Так что для горизонтального я дал text-align: center; , для вертикального мне не…

CSS: как выровнять содержание текста по горизонтали-по центру и по вертикали-по центру?

как я могу выровнять текст внутри div, в horizonally-по центру и по вертикали-по центру? <div style=height: 300px;> <p>Envision various details for your big day with help from our photo…

После выравнивания div по горизонтали и вертикали по центру

Я видел много вопросов о том, как выровнять div по горизонтали и вертикали по центру , и я также получил ответ. Код, который я получил: Html- <div class=outer> <div class=middle> <div…

Как выровнять текст по центру в div

Я хотел бы выровнять текст по центру как по вертикали, так и по горизонтали внутри этого div. Таким образом, он имеет равное заполнение сверху и снизу. Как мне это сделать с моим текущим кодом? мой…

Как вы выравниваете div по горизонтали и вертикали?

Я хотел бы горизонтально и вертикально выровнять следующий div по центру страницы. Мне удалось выровнять его по горизонтали к центру, но не по вертикали. Как я могу это сделать?…

Как выровнять текст в окне по вертикали и горизонтали?

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

Выровняйте изображение по центру как по вертикали, так и по горизонтали

У меня есть список изображений, которые мне нужно выровнять по центру как по вертикали, так и по горизонтали. Как выровнять изображения в центре их соответствующего li как по горизонтали, так и по…

Выровняйте div по горизонтали и вертикали по центру страницы (отзывчиво)

У меня есть div для формы входа в систему. Я хочу выровнять div по горизонтали и вертикали по центру во всех устройствах. Любая помощь будет оценена по достоинству

Как выровнять кнопку по горизонтали и вертикали в документе?

Я хочу выровнять кнопку по горизонтали и вертикали в документе, теперь я хочу выровнять по горизонтали, но я не могу определить, как выровнять по вертикали? На рисунке ниже кнопка выровнять по…

Как выровнять текст внутри элемента <div> по горизонтали?

Как выровнять текст внутри div по центру по вертикали? У меня есть элемент div внутри моей страницы html, где высота div-это размер экрана, а текст внутри этого div должен быть в центре. Я…

CSS/CSS3. Некоторые приемы центрирования.

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

ГОРИЗОНТАЛЬНОЕ ЦЕНТРИРОВАНИЕ.
Центрирование строк текста.


p { text-align: center; }
h3 { text-align: center; }

Центрирование блока с фиксированной шириной.


p.blocktext {
   margin-left: auto;
   margin-right: auto;
   width: 6em;
}
...
<p>Этот довольно ...

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

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



img.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto
}
...
<img  src="" alt="">

ВЕРТИКАЛЬНОЕ ЦЕНТРИРОВАНИЕ.
CSS уровня 2.

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



div.outer {
    height: 300px;
    display: table-cell;
    vertical-align: middle;
}
...
<div>
   <p>Этот параграф отцентрирован вертикально.</p>
</div>

 

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



/* Вертикальное центрирование: сделать размеры блока максимальными и отформатировать его как таблицу */
div.outer {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    display: table
}
p {
    display: table-cell;
    vertical-align: middle
}
/* Горизонтальное центрирование изображения: выставить левый и правый отступы в 'auto' */
   img.displayed {
     display: block;
     margin: 1em auto
}
/* Так же нужно отцентировать строки параграфа */
p {
  text-align: center
}
...
<div>
  <p>Этот параграф отцентрирован по вертикали и горизонтали.
   <img class=displayed src="" alt="">
  </p>
</div>

CSS уровня 3.

CSS3 предлагает другие возможности вертикального выравнивания. Например есть способ центрирования по вертикали с использованием абсолютного позционирования, которое, однако, может привести к частичному перекрытию текста. Но если точно известно, что перекрытие текста не станет проблемой в веб-документе, то можно использовать свойство ‘transform’, чтобы выровнять по центру абсолютно позиционированный элемент:



div.outer {
             height: 10em;
             position: relative }              /* 1 */
          div.outer p {
             margin: 0;
             position: absolute;               /* 2 */
             top: 50%;                         /* 3 */
             transform: translate(0, -50%) }   /* 4 */
...
<div>
  <p>Этот параграф отцентрирован по вертикали.</p>
</div>

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

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

  2. Сам элемент сделайте абсолютно позиционированным (position: absolute).

  3. Поместите элемент посередине контейнера с помощью ‘top: 50%’. (Заметьте, что ‘50%’ здесь означают 50% высоты контейнера.)

  4. Используйте translate, чтобы переместить элемент вверх на половину своей собственной высоты. ( ‘50%’ в ‘translate(0, -50%)’ указывают на высоту самого элемента.) 

Есть также прием выравнивания по вертикали без использования абсолютного позиционирования. Он основан на ключевом слове ‘flex’ для свойства ‘display’:



div.outer {
  height: 10em;
  display: flex;
  align-items: center
}
div.outer p {
  margin: 0
}
...
<div>
  <p>Этот параграф отцентрирован по вертикали с помощью свойства 'display: flex'.</p>
</div>

Если добавить еще и выравнивание по горизонтали, то получим полностью центрированный элемент:



div.outer {
  height: 10em;
  display: flex;
  justify-content: center; /*Центрирование по горизонтали*/
  align-items: center;     /*Центрирование по вертикали */
}
div.outer p {
  margin: 0
}
...
<div>
  <p>Этот параграф отцентрирован по вертикали и горизонтали.</p>
</div>

Основной источник  

Выравнивание текста по центру css по вертикали

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

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

Первый метод с line-height

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

первый пример. демо №1

Точно таким же способом возможно реализовать картинку по центру вертикали, но добавив одно новое свойство vertical-align: middle; .

Выравнивание со свойством position

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

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

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

Выравнивание со свойством table

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

применять не будет, а воспользуемся свойствами CSS, такими как display: table; , display: table-cell; . В старых версиях IE данный способ не работает, да и не нужно. Ими, вообще, еще кто-то пользуется?

Выравнивание со свойством flex

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

Выравнивание со свойством transform

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

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

Вертикальное выравнивание по центру с помощью CSS достигается не так просто. Существует множество способов и не все работают во всех броузерах. Давайте рассмотрим 5 различных методов, а также «за» и «против» каждого из них. Пример.

1-ый способ

Этот метод предполагает, что мы устанавливаем некоторому элементу

Плюсы

  • Контент может динамически изменять высоту (высота не определена в CSS).
  • Контент не обрезается в случае, если для него недостаточно места.

Минусы

  • Не работает в IE 7 и меньше
  • Много вложенных тэгов

2-ой метод

Этот метод использует абсолютное позиционирование div-а, которому top устанавливается в 50%, а верхний отступ (margin-top) минус половине высоты контента. Это подразумевает, что объект должен иметь фиксированную высоту, которая определена в стилях CSS.

Поскольку высота фиксированная, вы можете установить overflow:auto; для div-а содержащего контент, таким образом, в случае если контент не будет влазить, то появятся скролл-бары.

Плюсы

  • Работает во всех броузерах.
  • Нет лишней вложенности.

Минусы

  • Когда не достаточно места, контент пропадает (например, div находится внутри body, а пользователь уменьшил окна, в этом случае скролл-бары не появятся.

3-ий метод

В этом методе, мы обернём div с контентом другим div-ом. Установим ему высоту в 50% (height: 50%;), а нижний отступ половине высоты (margin-bottom:-contentheight;). Контент будет очищать float и выводиться по центру.

Плюсы

  • Работает во всех броузерах.
  • Когда недостаточно места (например, когда уменьшено окно) контент не обрезается, появятся скроллбары.

Минусы

  • Думаю только один: что используется лишний пустой элемент.

4-ый метод.

Этот метод использует свойство position:absolute; для div-а с фиксированными размерами (шириной и высотой). Затем устанавливаем ему координаты top:0; bottom:0;, но поскольку у него фиксированная высота, то он не может растянуться и выравнивается по центру. Это очень похоже на общеизвестный метод горизонтального выравнивания по центру блочного элемента фиксированной ширины (margin: 0 auto;).

Плюсы

Минусы

  • Не работает в Internet Explorer
  • Контент будет обрезаться без скролл-баров, если не хватает места в контейнере.

5-ый метод

С помощью этого метода можно выровнять по центру одну строку текста. Просто устанавливаем высоту текста (line-height) равной высоте элемента (height). После этого строка будет выведена по центру.

Плюсы

  • Работает во всех броузерах.
  • Не обрезает текст, если он не влез.

Минусы

  • Работает только с текстом (не работает с блочными элементами).
  • Если текста больше чем одна строка, то выглядит очень плохо.

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

Теперь вы знаете как добиться вертикального выравнивания по центру, давайте сделаем простой web-сайт, который, в конце-концов будет выглядеть так:

Шаг 1

Всегда хорошо начинать с семантической разметки. Наша страница будет структурирована следующим образом:

  • #floater (чтобы выровнять контент по центру)
  • #centred (центральный элемент)
  • #content
  • #bottom (для копирайтов и всего такого)

    • Напишем следующую html-разметку:

    Шаг 2

    Сейчас мы напишем простейший CSS, для размещения элементов на странице. Вы должны сохранить этот код в файле style.css. Именно на него прописана ссылка в html-файле.

    Перед тем как сделать наш контент выровненным по центру, необходимо для body и html установить высоту 100%. Так как высота считается без внутренних и внешних отступов (padding и margin), то мы устанавливаем их (отступы) в 0, чтобы не было скроллбаров.

    Нижний отступ для элемента «floater»-а равен минус половине высоты контента (400px), а именно -200px;

    Сейчас ваша страничка должна выглядеть приблизительно так:

    Ширина элемента #centered 80%. Это делает наш сайт уже на маленьких экранах и шире на больших. большинство сайтов выглядит неприлично на новых широких мониторах в верхнем левом углу. Свойства min-width и max-width также ограничивают нашу страничку, чтобы она не выглядела слишком широкой или слишком узкой. Internet Explorer не поддерживает эти свойства. Для него надо установить фиксированную ширину.

    Поскольку элементу #centered установлено position:relative, мы можем использовать абсолютное позиционирование элементов внутри него. Затем установим overflow:auto; для элемента #content, чтобы появлялись скроллбары, в случае если не будет помещаться контент.

    Шаг 3

    И последнее что мы сделаем, это добавим кое-какие стили, чтобы страничка выглядела немного привлекательнее. Давайте начнём с меню.

    Первое что мы сделали, чтобы меню выглядело лучше, удалили маркеры, установив атрибут list-style:none, а также установили внутренние и внешние отступы, так как по умолчанию в разных броузерах они сильно различаются.

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

    Другая интересная вещь, которую мы использовали для меню – это псевдо-классы :before и :after. Они позволяют вам добавить что-нибудь перед и после элемента. Это хороший способ добавлять иконки или символы, такие как стрелочка в конце каждой ссылки. Такой трюк не работает в Internet Explorer 7 и ниже.

    Шаг 4

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

    В этих стилях мы устанавливаем закруглённые углы для элемента #centered. В CSS3, за это будет отвечать свойство border-radius. Это пока что не реализовано некоторыми броузерами, разве только использовать приставки -moz и -webkit для Mozilla Firefox и Safari/Webkit.

    Совместимость

    Как вы уже наверное предположили, основной источник проблем совместимости – Internet Explorer:

    • Элементу #floater обязательно надо установить ширину
    • В IE 6 лишние отступы вокруг меню

    Выравнивание по центру в CSS

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

    Выравнивание по горизонтали

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

    А что если бы наш дочерний элемент был бы блочным с заданной шириной? Видим, что на блочное содержимое text-align не действует:

    Если мы не зададим ширину, то текст отцентрируется, но лишь потому что элемент займет всю ширину, а нам обычно нужно центрирование самого блока.
    В данном случае мы можем прибегнуть к margin: auto. Браузер автоматический определит отступы нашего дочернего элемента со всех сторон. Но посмотрите по вертикали элемент не отцентрировался. Потому что margin-top и margin-bottom приводятся автоматом к 0.

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

    Что же нам делать с вертикальным выравниванием?
    Рассматриваем известные. Мы знаем высоту родительского элемента, к тому же дочерний элемент — одна строка. Значит можем задать ей высоту:
    line-height: 200px;
    Ровно столько сколько высота родительского элемента. Так как текст в span встает по центру строки, мы его так отцентрируем.

    Аналогично line-height сработает и для строчного дочернего элемента.
    Однако, для нескольких строк такой вариант не сработает.
    Для наглядности покрасим наш родительский элемент. И можно вспомнить про position: absolute.
    Для начала нужно позиционировать родительский элемент, чтобы отсчитывать отступы дочернего относительно него. Ставим в div position: relative.
    Далее позиционируем дочерний абсолютно, задаем отступ сверху 50%. Однако, в данном случае по центру у нас будет вершина дочернего элемента. Ставим margint-top равный половине высоты дочернего элемента. В случае с одной строкой эта высота равна line-height.

    Отлично, все работает. Разве что перестал работать margin: auto для выравнивания по горизонтали, так как при абсолютном позиционировании margin рассчитывается только если задано расстояние элемента от родительского позиционированного для данной стороны. Т.е. для того, чтобы работал margin: auto для левой и правой стороны, нам нужно задать left и right.

    А теперь давайте забудет про абсолютное позиционирование. И попробуем другие способы. Например, мы может воспользоваться свойством display: table. Правда, как у любой таблицы, ширина родительского элемента теперь рассчитывается по содержимому. Зато нам не требуется знание высоты дочернего элемента, как в случаей с абсолютным позиционированием.

    Кстати, если дочерний элемент инлайновый и известна высота родителя, то мы можем использовать vertical-align: middle.

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

    Почему это работает? Сначала следует сказать,что строчно-блочные элементы выстраиваются в линию, которая заключена в так называемую box-line. Высота коробки зависит от высоты содержимого. Внутри коробки есть базовая линия, на которой располагается строковое содержимое инлайн элемента. Положение этой линии может меняться в зависимости от значения vertical-align любого инлайн элемента, входящего в box-line.
    Мы хотим выровнять относительно родительского элемента, значит нужно назначить дочернему его высоту. Мы не можем нашему дочернему поставить такую высоту, ведь он нам нужен не на весь родительский. Тогда мы используем дополнительный элемент. Он невидим, если мы, проставим для него только высоту. Но он меняет положение базовой линии для всей строки. Поэтому аналогично выравнится и исходный элемент.

    Еще, конечно, можно воспользоваться flex:  justify-content устанавливает выравнивание по горизонтали, а align-items по вертикали. Но обратите внимание на поддержку браузерами.

    Полезные статьи

    Vertical-Align: All You Need To Know
    A Complete Guide to Flexbox

    Выравнивание элементов во 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 (Макет Сетки)

    Как выровнять текст по вертикали или горизонтали в Microsoft Word

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

    Выравнивание текста по горизонтали в Word

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

    Чтобы выровнять текст по горизонтали на странице, выделите текст, который Вы хотите центрировать. Затем щелкните значок «По центру» в группе «Абзац» на вкладке «Главная». Кроме того, Вы можете использовать сочетание клавиш Ctrl + E.

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

    Выравнивание текста по вертикали в Word

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

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

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

    Откроется диалоговое окно «Параметры страницы». Выберите вкладку «Источник бумаги», а затем нажмите стрелку рядом с «Вертикальное выравнивание» в разделе «Страница». Появится выбор вариантов вертикального выравнивания. Нажмите «По центру» (или выберите другой вариант, который лучше соответствует Вашим требованиям).

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

    Что если нужно выровнять определенный текст в документе только по вертикали? Есть также простой способ сделать это.

    Сначала выделите текст, который Вы хотите выровнять по вертикали. После выбора вернитесь на вкладку «Источник бумаги» диалогового окна «Параметры страницы». Затем выберите нужный тип вертикального выравнивания, откройте раскрывающееся меню рядом с «Применить», выберите «к выделенному тексту», а затем нажмите кнопку «ОК».

    Выбранный текст теперь будет отражать выбранный вариант вертикального выравнивания.

    Как выровнять HTML изображение по центру

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

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

    Центрирование в параграфе

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

    
<p>
    <img src="//msiter.ru/image.jpg" alt="изображение в центре параграфа" />
</p>

<style>
.aligncenter {
    text-align: center;
}
</style>

    Здесь всю работу делает CSS свойство text-align: center;. Если вы знаете код CSS, то вам ничего не нужно объяснять.

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

    Чтобы отцентрировать блоковый элемент, достаточно применить к нему стиль margin: auto;. Но известно, что тег img – это строковый элемент. Как же быть? Все очень просто. Чтобы все заработало, нужно сделать его блоковым применив CSS стиль display: block;.

    
<div>
    <img src="//msiter.ru/image.jpg" alt="отцентрированное изображение" />
</div>

<style>
.marginauto {
    margin: 10px auto 20px;
    display: block;
}
</style>

    Центрирование при помощи тега <center>

    Следует помнить, что тег <center> является устаревшим и не поддерживается в HTML5. Однако он все еще распознается веб-браузерами вроде Google Chrome.

    Раньше это был предпочтительный метод, потому что он не требовал таблиц стилей, а только простой HTML.

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

    
<center>
    <img src="//msiter.ru/image.jpg" alt="отцентрированное изображение" />
</center>

    Центрирование при помощи атрибута align=middle

    Еще один устаревший метод, который не требует использования CSS, похожий на предыдущий пример. В более старых версиях HTML мы могли центрировать изображение, устанавливая атрибут тега align=»middle».

    
<img align="middle" src="//msiter.ru/image.jpg" alt="отцентрированное изображение" />

    Выравнивание изображения по центру по вертикали

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

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

    
<div>
    <img src="//msiter.ru/image.jpg" alt="отцентрированное изображение" />
</div>

<style>
.verticalcenter {
    display: table-cell;
    height: 400px;
    vertical-align: middle;
}
</style>

    Одновременное центрирование по горизонтали и по вертикали

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

    
<div>
    <img src="//msiter.ru/image.jpg" alt="отцентрированное изображение" />
</div>

<style>
.verticalhorizontal {
    display: table-cell;
    height: 300px;
    text-align: center;
    width: 300px;
    vertical-align: middle;
}
</style>

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

    vertical-align — CSS: каскадные таблицы стилей

    Свойство CSS vertical-align устанавливает вертикальное выравнивание встроенного блока, блока встроенного блока или ячейки таблицы.

    Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на перенос.

    Свойство vertical-align можно использовать в двух контекстах:

    • Для вертикального выравнивания прямоугольника встроенного элемента внутри содержащего его линейного поля.Например, его можно использовать для вертикального расположения в строке текста:
      
    
вверху: 
в центре: 
внизу: 
супер: 
sub: 

    

    
text-top: 
нижний текст: 
0.2em: 
-1em: 
20%: 
-100%: 

    

      
      # * {
  размер коробки: рамка-рамка;
}

img {
  маржа-право: 0.5em;
}

п {
  высота: 3em;
  заполнение: 0,5 эм;
  семейство шрифтов: моноширинный;
  оформление текста: подчеркивание над чертой;
  маржа слева: авто;
  маржа-право: авто;
  ширина: 80%;
}
    • Для вертикального выравнивания содержимого ячейки в таблице:
      <таблица>
  
     базовый уровень 
     вверх 
     средний 
     снизу 
    
      
     Существует теория, согласно которой, если кто-нибудь когда-нибудь узнает, для чего именно Вселенная и почему она существует, она мгновенно исчезнет и будет заменена чем-то еще более причудливым и необъяснимым.
    

     Есть еще одна теория, согласно которой это уже произошло. 
    
    
  


      
      стол {
  маржа слева: авто;
  маржа-право: авто;
  ширина: 80%;
}

table, th, td {
  граница: сплошной черный 1px;
}

td {
  заполнение: 0.5em;
  семейство шрифтов: моноширинный;
}

    Обратите внимание, что vertical-align применяется только к элементам inline, inline-block и table-cell: вы не можете использовать его для вертикального выравнивания элементов уровня блока.

     
вертикальное выравнивание: базовая линия;
вертикальное выравнивание: суб;
вертикальное выравнивание: супер;
вертикальное выравнивание: текст сверху;
вертикальное выравнивание: нижний текст;
вертикальное выравнивание: по центру;
вертикальное выравнивание: сверху;
вертикальное выравнивание: снизу;


вертикальное выравнивание: 10em;
вертикальное выравнивание: 4 пикселя;


вертикальное выравнивание: 20%;


вертикальное выравнивание: наследование;
вертикальное выравнивание: начальное;
вертикальное выравнивание: отключено;

    Свойство vertical-align указано как одно из значений, перечисленных ниже.

    Значения для встроенных элементов

    Родительские значения

    Эти значения выравнивают элемент по вертикали относительно его родительского элемента:

    базовый
    Выравнивает базовую линию элемента с базовой линией его родительского элемента.Базовая линия некоторых заменяемых элементов, таких как

    2024 © Все права защищены. Карта сайта