Содержание

Центрирование (горизонтальное и вертикальное) при помощи CSS 3

Автор Алексей На чтение 3 мин Просмотров 70 Опубликовано Обновлено

Сегодня поговорим о том как при помощи css 3 отцентрировать элементы по вертикали и горизонтали.

Центрирование по вертикали

Абсолютное позиционирование (transform)

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

Для html разметки, которая выглядит так:

<div>
   <p>Какой то текст…</p>
</div>

Со следующими базовыми стилями (css правилами):

.container {
   height: 10em;
}
.container p {
   margin: 0;
}

В таблицу стилей добавить основные правила:

  1. Делаем контейнер относительно позиционированным (position: relative).
  2. Сам элемент делаем абсолютно позиционированным (position: absolute).
  3. Помещаем элемент посередине контейнера с помощью ‘top: 50%’. (делаем отступ на 50% высоты контейнера.)
  4. Используйте translate, чтобы переместить элемент вверх на половину своей собственной высоты. ( ‘50%’ в ‘translate(0, -50%)’ указывают на высоту самого элемента.)
.container {
   height: 10em;
   position: relative                /* 1 */
}              
.container p {
   margin: 0;
   position: absolute;               /* 2 */
   top: 50%;                         /* 3 */
   transform: translate(0, -50%)     /* 4 */
}

Вертикальное центрирование с использованием flex

Возьмем выше приведенную html структуру и базовые CSS классы. Допишем им классы выравнивания при помощи flex:

.container {
   height: 10em;
   display: flex;                /* 1 */
   align-items: center           /* 2 */ 
}              
.container p {
   margin: 0;
}

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

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

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

Побочный эффект абсолютного позиционирования абзаца состоит в том, что абзац становится ровно таким широким, каким он должен быть (если только мы явно не укажем ширину). Разметку и стили берем с «Абсолютное позиционирование (transform)». Теперь добавим классы горизонтального выравнивания с помощью правила ‘left: 50%’ и одновременно сдвигаем его влево на половину своей собственной ширины в преобразовании ‘translate’:

.container {
    height: 10em;
    position: relative 
}
.container p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%) 
}

А если использовать ‘flex’, всё становится намного легче:

.container {
  height: 10em;
  display: flex;
  align-items: center;
  
justify-content: center
} .container p { margin: 0 }

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

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

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

<html>
  <style>
    body {
        background: white }
    section {
        background: black;
        color: white;
        border-radius: 1em;
        padding: 1em;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%) }
  </style>
  <section>
    <h2>Красиво выровнен по центру</h2>
    <p>Этот текстовый блок выровнен вертикально по центру.
    <p>И горизонтально, если окно достаточно широкое.
  </section>

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

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

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

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

text-align

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

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

margin: auto

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

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

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

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

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

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

position:absolute + margin

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

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

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

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

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

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

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

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

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

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

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

Таблица с vertical-align

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Итого

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Горизонтальное выравнивание inline-block элементов

Элементы inline-block с выравниванием по умолчанию (по левому краю)

Inline-block с текстом

Inline-block с абзацем

Inline-block с картинкой и абзацем

Список внутри inline-block:

  • Пункт 1
  • Пункт 2
  • Пункт 3
Inline-block с таблицей
НомерДатаЗанятиеВремя
114.янвHtml и css18:00
223.янвPython18:30
302.февJavascript18:00
405.февAjax18:30

Элементы inline-block с выравниванием по правому краю

Поскольку свойство text-align наследуется, содержимое блоков тоже прижато к правым границам.

Inline-block с текстом

Inline-block с абзацем

Inline-block с картинкой и абзацем

Список внутри inline-block:

  • Пункт 1
  • Пункт 2
  • Пункт 3
Inline-block с таблицей
НомерДатаЗанятиеВремя
114.янвHtml и css18:00
223.янвPython18:30
302.февJavascript18:00
405.февAjax18:30

Элементы inline-block с центрированием

Поскольку свойство text-align наследуется, содержимое блоков тоже центрировано.

Inline-block с текстом

Inline-block с абзацем

Inline-block с картинкой и абзацем

Список внутри inline-block:

  • Пункт 1
  • Пункт 2
  • Пункт 3
Inline-block с таблицей
НомерДатаЗанятиеВремя
114.янвHtml и css18:00
223.янвPython18:30
302.февJavascript18:00
405.февAjax18:30

Центрированные элементы inline-block с содержанием, выровненным по левому краю

Контейнеру, содержащему строчно-блочные элементы, назначено правило text-align: center. Самим элементам присвоено правило text-align: left.

Inline-block с текстом

Inline-block с абзацем

Inline-block с картинкой и абзацем

Список внутри inline-block:

  • Пункт 1
  • Пункт 2
  • Пункт 3
Inline-block с таблицей
НомерДатаЗанятиеВремя
114.янвHtml и css18:00
223.янвPython18:30
302.февJavascript18:00
405.февAjax18:30

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



У меня возникли проблемы с выравниванием формы как по вертикали, так и по горизонтали.

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

Вот что у меня сейчас есть:

HTML

<!DOCTYPE html>
<head>
    <link rel="stylesheet" type="text/css" href="global.css">
    <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
    <div>
        <div>
            <img src="../images/logo.png">
        </div>

        <div>
            <form name="searchform" action="checklogin.php" method="post">
            <br>
                User Name : <input type="text" name="myusername" size="16" /><br>
                Password : <input type="password" name="mypassword" /><br>
                <input type="submit" value="Login" /><br>
            </form>
        </div>
    </div>
    </div>
</body>
</html>

Мировой CSS

#wrapper {
    position: relative;
    max-width: 1024px;
    height: 1000px;
    margin-left: auto;
    margin-right: auto;
}
#logo_div {
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

#logo {
    display: block;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

Индекс CSS

#login {
    position: relative;
    margin-left: auto;
    margin-right: auto;
}
#login_form {
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

Любая помощь будет оценена по достоинству. Спасибо

html css
Поделиться Источник David     02 мая 2013 в 14:54

2 ответа


  • Кроссбраузерное выравнивание div по центру с помощью CSS

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

  • CSS горизонтальное выравнивание меню в ячейке

    У меня есть горизонтальное меню CSS в ячейке таблицы. Я установил выравнивание ячейки на align=right .., и меню CSS находится в этой ячейке, но оно не выровнено по правому краю… смотрите код HERE … я хочу сделать это меню выровненным по правому краю



3

Ты хочешь чего-то подобного?

попробуйте это css

#login{
    position:absolute;
    left:50%;
    top:50%;

    margin-left:-120px;
    margin-top:-60px;

    border:1px solid #ccc;
    width:240px;
    height:120px;
}

Если вам нужна форма, центрированная по вертикали и горизонтали, вы можете использовать css атрибут position:absolute; а затем использовать left:50%; top:50% для выравнивания верхнего левого угла div по центру браузера. Но ваш Div не будет выглядеть центрированным из-за этого. потому что он расположен по центру окна в левом верхнем углу. Я просто использовал отрицательное поле с половиной ширины и высоты div, чтобы правильно центрировать его.

Надеюсь, это то, что вы ищете.

Спасибо Bojangles, за предложение !

Поделиться Osho     02 мая 2013 в 15:26



0

Прямо сейчас ваш #login div использует 100% ширины страницы, вам нужно установить меньшую ширину, чтобы ее можно было правильно центрировать. И вы можете центрировать его по вертикали, установив сверху значение 50% минус высота div / 2.

Подобный этому

#login
{
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 300px;
    top: 50%;
    margin-top:-50px;
}

Поделиться Benjamín Martínez     02 мая 2013 в 15:32


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


Вертикальное выравнивание ячейки PDF с com.lowagie.text

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


Горизонтальное выравнивание внутренних » дивов`

Я ищу горизонтальное (и предпочтительно вертикальное) выравнивание трех внутренних divs . Применение margin: 0 auto; к классу vbox должно сделать трюк, но, как и в следующем минимальном коде, это…


Вертикальное и горизонтальное выравнивание изображения

У меня есть заполнитель (строящийся) сайта, который содержит только одно изображение с логотипом. I горизонтально выровнен с маржей: 0 авто. Но как я узнаю дополнительно горизонтальное выравнивание…


Кроссбраузерное выравнивание div по центру с помощью CSS

Какой самый простой способ выровнять div , чье положение relative по горизонтали и вертикали, используя CSS ? Ширина и высота div неизвестны, то есть он должен работать для каждого измерения div и…


CSS горизонтальное выравнивание меню в ячейке

У меня есть горизонтальное меню CSS в ячейке таблицы. Я установил выравнивание ячейки на align=right .., и меню CSS находится в этой ячейке, но оно не выровнено по правому краю… смотрите код HERE…


CSS Вертикальное Выравнивание: Причуды Браузера

На этот вопрос о том, как сделать вертикальное выравнивание с css, комментарии Сэма ведут на эту страницу: http://www.jakpsatweb.cz/css/ приклад / вертикальное выравнивание-окончательное…


Есть ли какой-нибудь способ установить вертикальное выравнивание в css?

Есть ли какой-нибудь способ установить вертикальное выравнивание в css? У меня есть текст внутри моего элемента <li> , но когда я устанавливаю выравнивание текста по центру, он устанавливает…


Как получить вертикальное и горизонтальное выравнивание по целому числу?

Я пытаюсь преобразовать целочисленное значение в выравнивание содержимого. Целое число может содержать как горизонтальное, так и вертикальное выравнивание одновременно. Сначала я создал…


Измените выравнивание поля форматированного текста в WPF

Как изменить вертикальное и горизонтальное выравнивание коробки RichText. я перепробовал все горизонтальное выравнивание api и вертикальное выравнивание. но ничего не работает.


вертикальное выравнивание и связь сетки CSS

Как вертикальное выравнивание и сетка CSS работают вместе? У меня есть элемент, который находится рядом с элементами, которые должны быть выровнены точно посередине. Смотреть ниже: .alphabet {…

CSS метафизика: ПОЧЕМУ вертикальное выравнивание страницы так сложно?

Относительно страницы горизонтальное выравнивание в CSS легко — a margin:0 auto доставит вас большую часть времени и text-align:center для некоторых других случаев.

Мой вопрос к гуру не в том, как вертикально выровнять, но почему это намного сложнее? Почему нет margin:auto 0? Я имею в виду, с точки зрения программирования.

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

Ответ 1

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

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

Ответ 2

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

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

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

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

Аналогично, CSS3-преобразования могут учитывать высоту дочернего элемента: transform: translateY(-50%). До CSS3 было принято использовать отрицательный margin-top вместо этого, но это требовало установки фиксированной высоты для дочернего элемента.

Выравнивание по центру html css. Горизонтальное и вертикальное выравнивание элементов

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

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

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

Предположим, что это шапка сайта. Она не тянется на всю ширину окна и нам надо ее отцентрировать. Пишем так:

#header{

width / max — width : 800px ;

margin : 0 auto ;

Нам нужно указать точную или максимальную ширину, после чего записать ключевое свойство – margin: 0 auto. Оно задает внешние отступы нашей шапке, первое значение определяет отступы сверху и снизу, а второе – справа и слева. Значение auto дает команду браузеру автоматически рассчитать отступы с обеих сторон так, чтобы элемент был ровно по центру родительского. Удобно!

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

Это тоже очень простой прием. Для выравнивания всех строчных элементов можно использовать свойство text-align и его значения: left, right, center. Последнее центрирует текст, что нам и нужно. Таким же образом можно выровнять даже картинку, потому что она тоже по умолчанию является строчным элементом.

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

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

Задать высоту блока с помощью внутренних отступов. Способ заключается в том, чтобы не задавать явную высоту с помощью height, а создать ее искусственно с помощью paddingов сверху и снизу, которые должны быть одинаковы. Создадим любой блок и запишем ему такие свойства:

div{ background: #ccc; padding: 30px 0; }

div {

background : #ccc;

padding : 30px 0 ;

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

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

div{ height: 60px; line-height: 60px; }

div {

height : 60px ;

line — height : 60px ;

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

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

div{ display: table-cell; vertical-align: middle; }

div {

display : table — cell ;

vertical — align : middle ;

Этот способ хорош тем, что вы сможете выровнять сколько угодно текста по центру. Но блоку, в который вложен наш div лучше прописать display: table, иначе может не работать.

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

Задать отступы в процентах. Если вы знаете высоту родительского элемента и помещаете в него еще один блочный элемент, то отцентрировать его можно с помощью процентных отступов. Например, родитель имеет высоту 600 пикселей. Вы помещаете в него блок, который имеет высоту 300 пикселей. Сколько вам нужно отступить сверху и снизу, чтобы отцентрировать его? По 150 пикселей, а это 25% от высоты родителя.

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

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

А если вдобавок к этому записать еще и margin: 0 auto, то элемент и по горизонтали станет в центр!

Чтобы выбрать нужные элементы input с типом «checkbox», можно воспользоваться селектором ‘:checkbox’ . Пример:

где handler — обработчик, который вызывается при наступлении события change

Работа с объектом Callbacks в jQuery: использование списка callback-функций

Объект Callbacks в jQuery позволяет создать нечто вроде списка обратных функций, которые будут выполнены при вызове служебного метода fire(). При этом при вызове метода fire() возможно передать какой-то аргумент, который будет использован каждой callback-функцией. Как это работает, мы разберем сейчас на нескольких примерах.

Ловим потерю фокуса. Метод blur() в jQuery

Метод blur() в jQuery позволяет назначить для определенного элемента на странице обработчик, который будет вызван как только будет потерян фокус с данного элемента. Первоначально это событие относилось преимущественно к элементам формы — тегам input, однако последние версии браузеров способны обрабатывать данное событие практически для всех видов DOM-элементов.

Вставка контента перед содержимым выбранного объекта. Метод before() в jQuery

Метод before() в jQuery позволяет вставить определенный контент или объекты перед содержимым каждого из множества указанных объектов.
Синтаксис метода прост:

Вторая вариация:

jQuery. Метод attr(). Как получить или добавить атрибут к элементу

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

Метод.appendTo() в jQuery. Добавление содержимого в конец элементов

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

Метод.animate() в jQuery: анимация изображений, текста и чего угодно

Метод.animate() позволяет создавать анимационные эффекты с использованием css-свойств самих объектов. Метод имеет две вариации с различным количеством передаваемых параметров

Конвертация видео с помощью программы Movavi

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

Здравствуйте! Продолжаем осваивать основы языка HTML. Посмотрим, что нужно писать, чтобы выровнять текст по центру, ширине или краям.

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

Способ 1 — прямая работа c HTML

На самом деле все достаточно просто. Смотрите пример ниже.

Выравнивание абзаца по центру.

Если требуется сдвинуть текстовые фрагменты иным образом, то вместо параметра «center» прописываем следующие значения:

  • justify – выравнивание текста по ширине страницы;
  • right – по правому краю;
  • left — по левому.

По аналогии можно сдвинуть контент, который находится в заголовках (h2, h3), контейнере (div).

Способ 2 и 3 — использование стилей

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

Текстовый блок.

В таком виде код прописывается непосредственно в HTML для выравнивания текстового контента по центру.

Есть еще альтернативный вариант добиться результата. Нужно будет проделать пару действий.

Шаг 1. В основном коде написать

Текстовый материал.

Шаг 2. В подключаемом файле CSS вписать следующий код:

Rovno {text-align:center;}

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

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

Всего несколько вопросов:

  • Делаете информационный некомерческий проект?
  • Хотите, чтобы сайт хорошо продвигался в поисковых системах?
  • Желаете получать доход в сети?

Если все ответы положительные, то просто посмотрите на о комплексном подходе к развитию сайта. Информация окажется особенно полезной, если он работает на CMS WordPress.

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

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

Впереди опубликую еще не мало реально полезной информации. Оставайтесь на связи. При желании можете подписаться на обновления Workip на e-mail. Форма подписки расположена ниже.

HTML теги, определяющие выравнивание текста, отступ

Выровненный по ширине текст используется в типографии

В примере ниже показано, как выровнить текст по ширине страницы:

align=»left» align=»right»

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

align=»justify» align=»center»

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

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

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

Выравнивание текста в HTML по центру и по ширине

Выравнивание текста в HTML по центру, текст справа :

Результат:

Атрибуты и значения

  • align=»left» — определяет выравнивание текста слева (по умолчанию).
  • align=»center» — выравнивает текст по центру .
  • align=»right» — выравнивает текст справа .

Выравнивание | HTML отступ текста

HTML текст и его отступ слева страницы

Произведем отступ текста слева двумя способами:

Результат:

Посмотреть в новом окне.

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

Основные тонкости

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

Как сделать саму таблицу по центру

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

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

Выравнивание по центру в ячейках

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

, отвечающий за конкретную ячейку в строке. Далее необходимо присвоить его атрибутам valign (вертикаль) и/или align (горизонталь) значение «center», в зависимости от вашей задачи:
Текст по центру ячейки

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

:

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


2022-03-02 00:10:57 2022-02-24 03:14:26 2022-02-24 03:14:26 2022-02-18 02:44:16

Руководство CSS Align

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

Horizontal Align

Горизонтальное выравнивание (Horizontal Align) это способ, где вы можете сделать так, чтобы элемент отображался на левой стороне (Left), по центру (Center) или на правой стороне (Right).

Vertical Align

Вертикальное выравнивание (Vertical Align) это способ, где вы можете сделать так, чтобы элемент отображался наверху (Top), по середине (Middle) или внизу (Bottom).

Если у вас есть блочный элемент (Block element), например <div>, и вы хотите выровнить его горзонтально по центру, CSS margin:auto является хорошим решением.

Вам нужно настроить размер ширины — это определенное число для элемента, или значение в процентах ( % ), но должно быть меньше 100%  Это гарантирует то, что элемент не будет занимать полностью горизонтальное пространство содержащего его элемента.

И примените для него CSS margin:auto.


margin-left: auto;
margin-right: auto;

/* OR:  */

margin: auto;

Примечение: CSS margin-top:auto и CSS margin-bottom:auto не выравнивают по вертикали.

h-align-block-example.html


<!DOCTYPE html>
<html>
<head>
    <title>CSS Align</title>
    <meta charset="UTF-8"/>
    <style>
        .center {
           margin-left: auto;
           margin-right: auto;
           width: 180px;
           border: 3px solid green;
           padding: 10px;
        }
    </style>
</head>
<body>
    <h4>Horizontal Align - Center</h4> 
    <hr/>
    <div class = "center">
         margin-left: auto; <br/>
         margin-right: auto; <br/>
         width: 180px; <br/>
         border: 3px solid green; <br/>
         padding: 10px;<br/>
    </div>
</body>
</html>

Свойство (property) CSS text-align используется для блочного элемента (block element) или ячейки (cell) таблицы, чтобы выравнивать по-горизонтали (Horizontal align) его встроенное содержание (inline content).

Когда CSS text-align применяется для элемента, он работает со всеми встроенными содержаниями (inline content) данного элемента, например текстовое содержание, подэлементы как <span>,.. Но он не работает для подэлементов текущего элемента.

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

css — Как выровнять элементы div по горизонтали? — Переполнение стека

спросил

Просмотрено 431 тысяч раз

По какой-то причине мои элементы div не центрируются по горизонтали в содержащем элементе div:

  .ряд {
  ширина: 100%;
  поле: 0 авто;
}
.блокировать {
  ширина: 100 пикселей;
  плыть налево;
}  
  <дел>
  
Лорем
Ипсум
Долор

А иногда есть рядный div только с одним блочным div. Что я делаю неправильно?

ТайлерХ

20.4k5757 золотых знаков6969 серебряных знаков9191 бронзовый знак

спросил 14 фев, 2012 в 13:02

Джон Джон

6,0441414 золотых знаков5151 серебряный знак9999 бронзовых знаков

1

Чтобы достичь того, что вы пытаетесь сделать:

Рассмотрите возможность использования display: inline-block вместо float .

.ряд { ширина: 100%; поле: 0 авто; дисплей: гибкий; выравнивание содержимого: по центру; /* для центрирования 3 блоков в центре */ /* justify-content: space-between; для пробела между ними */ } .блокировать { ширина: 100 пикселей; }

Последняя тенденция — использовать Flex или CSS Grid вместо Float. Тем не менее, еще 1% браузеров не поддерживают Flex. Но кого вообще волнуют старые пользователи IE 😉

Скрипка: проверьте здесь

<дел>