Отцентровать блок css: Центрирование горизонтальное и вертикальное

Как я могу горизонтально центрировать <div> внутри другого <div> , используя CSS? <div> <div>Foo foo</div> </div>

У меня есть внешний div шириной 800 пикселей. У меня есть внутренний div, который может быть где угодно от 200 до 600 пикселей в ширину. Я знаю, как центрировать внутренний div внутри внешнего, если…

У меня есть эти два дива, и я хотел бы центрировать один в другом. Любая помощь будет оценена по достоинству. <div class=PicturesBackground style=height:350px; width: 100%; background: green;…

Мне нужно центрировать div горизонтально внутри другого div Вот мой код HTML: <div id=outer class=outerDiv> <div id=inner class=innerDiv> </div> </div> Вот css : .outerDiv {…

Попытка горизонтально центрировать и обрезать (при необходимости) div внутри другого div. Такого же эффекта можно добиться и с фоновым изображением, но в данном случае мой контент-это не одно…

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

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

GooD утром я пытаюсь центрировать div внутри td. для моего td я определил апозицию с относительным, а div имеет абсолютное положение. Как я могу центрировать div без удаления Абсолюта отравления?

Как я могу центрировать один div внутри другого div? Спасибо!

Как можно центрировать div внутри другого div (как вертикально, так и горизонтально), используя CSS? Мой html является <div><div></div></div> И. ..

Расположение блока по центру css

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

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

Итак, мне нужно выравнять элемент по центру.

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

Выравнивание по центру строкового или строково-* элемента

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

See the Pen Centering Inline Elements by Chris Coyier (@chriscoyier) on CodePen.

Это будет работать для inline , inline-block , inline-table , inline-flex , и т. д.

Выравнивание по центру блочного элемента

Выравнять по центру блочный элемент вы можете установив свойствам margin-left и margin-right значение auto (у него также должна быть задана ширина, иначе элемент просто займёт всю ширину контента и не будет необходимости в выравнивании). Чаще всего это делается с помощью сокращённого свойства, вот так:

See the Pen Centering Single Block Level Element by Chris Coyier (@chriscoyier) on CodePen.

Это будет работать независимо от того какая ширина установленная у блочного элемента или его родителя.

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

Выравнивание по центру нескольких блочных элементов

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

See the Pen Centering Row of Blocks by Chris Coyier (@chriscoyier) on CodePen.

Если эти несколько блоков расположены на разных строках, то техника с автоматическими отступами по прежнему прекрасна:

See the Pen Centering Blocks on Top of Each Other by Chris Coyier (@chriscoyier) on CodePen.

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

Вертикальное выравнивание по центру в CSS немного сложнее.

Выравнивание по центру строкового или строково-* элемента

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

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

See the Pen Centering text (kinda) with Padding by Chris Coyier (@chriscoyier) on CodePen.

Если для вас по каким-то причинам padding — это не вариант, а вы пытаетесь выровнять по центру некоторый текст и точно знаете, что он не будет обёрнут чем-то ещё, то есть есть небольшой трюк, суть которого заключается в том чтобы установить свойство line-height равным значению высоты элемента.

See the Pen Centering a line with line-height by Chris Coyier (@chriscoyier) on CodePen.

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

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

See the Pen Centering text (kinda) with Padding by Chris Coyier (@chriscoyier) on CodePen.

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

See the Pen Vertical Center Multi Lines of Text with Flexbox by Chris Coyier (@chriscoyier) on CodePen.

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

Если обе техники приведённые выше нельзя применить, вы можете использовать технику «призрачного элемента», в которой псевдоэлемент с высотой в 100% размещается внутри контейнера и тех выравнивается вертикально по центру него.

See the Pen Ghost Centering Multi Line Text by Chris Coyier (@chriscoyier) on CodePen.

Выравнивание по центру блочного элемента

Выравнивание элемента с известной высотой

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

Но если вы знаете высоту элемента, то можете выравнивать по центру вот так:

See the Pen Center Block with Fixed Height by Chris Coyier (@chriscoyier) on CodePen.

Выравнивание элемента с неизвестной высотой

Даже если вы не знаете высоту элемента, его всё ещё можно протолкнуть на 50% высоты его родителя, а после поднять на 50% его собственной высоты:

See the Pen Center Block with Unknown Height by Chris Coyier (@chriscoyier) on CodePen.

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

Небольшой сюрприз, это можно очень просто сделать с помощью Flexbox.

See the Pen Center Block with Unknown Height with Flexbox by Chris Coyier (@chriscoyier) on CodePen.

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

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

Выравнивание элемента с фиксированной шириной и высотой

Использование отрицательных отступов ( maring ) равных половине этой ширины и высоты после абсолютного позиционирования элемента 50% / 50% выравняют элемент по центру. У этого способа достаточно хорошая кроссбраузерная поддержка:

See the Pen Center Block with Fixed Height and Width by Chris Coyier (@chriscoyier) on CodePen.

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

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

See the Pen Center Block with Unknown Height and Width by Chris Coyier (@chriscoyier) on CodePen.

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

Чтобы выровнять элемент по центру с помощью Flexbox вам нужно использовать два свойства центрирования:

See the Pen Center Block with Unknown Height and Width with Flexbox by Chris Coyier (@chriscoyier) on CodePen.

Выравнивание элемента с помощью CSS Grid

Это просто небольшой трюк (присланный Lance Janssen), который в большей степени будет работать для одного элемента:

See the Pen Centering with Grid by Chris Coyier (@chriscoyier) on CodePen.

Вывод

Теперь вы можете всё что угодно выравнять по центру в CSS.

В CSS некоторые на первый взгляд простые вещи оказывается не так-то просто выполнить. Одной из таких вещей, является выравнивание, т.е. когда один элемент необходимо расположить определённым образом относительного другого.

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

Примечание: под каждым решением приведен список браузеров с указанием версий, в которых указанный CSS код работает.

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

1. Выравнивание одного блока по центру другого. При этом первый и второй блок имеют динамические размеры.

Браузеры, которые поддерживают данное решение:

• Chrome 4.0+
• Firefox 3.6+
• Internet Explorer 9+
• Opera 10.5+
• Safari 3.1+

2. Выравнивание одного блока по центру другого. При этом второй блок имеет фиксированные размеры.

Браузеры, которые поддерживают данное решение:

• Chrome 1.0+
• Firefox 1.0+
• Internet Explorer 4.0+
• Opera 7.0+
• Safari 1.0+

3. Выравнивание одного блока по центру другого. При этом второй блок имеет размеры, заданные в процентах.

Браузеры, которые поддерживают данное решение:

• Chrome 1.0+
• Firefox 1.0+
• Internet Explorer 4.0+
• Opera 7.0+
• Safari 1.0+

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

1. Выравнивание одного блочного элемента ( display: block ) относительно другого (в котором он расположен) по горизонтали:

Браузеры, которые поддерживают данное решение:

• Chrome 1.0+
• Firefox 1.0+
• Internet Explorer 6.0+
• Opera 3.5+
• Safari 1.0+

2. Выравнивание строчного ( display: inline ) или строчно-блочного ( display: inline-block ) элемента по горизонтали:

Браузеры, которые поддерживают данное решение:

• Chrome 1.0+
• Firefox 3.0+
• Internet Explorer 8.0+
• Opera 7.0+
• Safari 1.0+

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

1. Отцентровать один элемент ( display: inline , display: inline-block ) относительно другого (в котором он расположен) по центру. Родительский блок в этом примере имеет фиксированную высоту, которая задаётся с помощью свойства CSS line-height .

Браузеры, которые поддерживают данное решение:

• Chrome 1.0+
• Firefox 3.0+
• Internet Explorer 8.0+
• Opera 7.0+
• Safari 1.0+

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

Браузеры, которые поддерживают данное решение:

• Chrome 1.0+
• Firefox 1.0+
• Internet Explorer 8.0+
• Opera 7.5+
• Safari 1.0+

Если Вы знаете какие-нибудь другие интересные хитрости или полезные готовые решения по выравниванию, то поделитесь ими в комментариях.

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

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

В последних реализациях 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

Искусство центрирования — Сообщество DEV

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

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

Вот небольшой код, демонстрирующий методы, которые я буду обсуждать ниже:

Авто поля

Начнем с очень распространенного поля : 0 auto .

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

Это очень полезный метод, поскольку многие элементы HTML по умолчанию являются блочными, в том числе:

• —

• <форма>
• <заголовок>
• <нижний колонтитул>
• <раздел>

Для объяснения маржи : 0 авто :

0 относится к верхнему и нижнему полям
авто относится к левому и правому полям.

Поскольку элементы уровня блока занимают всю ширину своего контейнера, auto будет давать равные поля как слева, так и справа от элемента — таким образом, центрируя его!

Примечание: если вам не нужны определенные поля сверху и снизу элемента, вы можете так же легко написать поле : auto , которое автоматически применит поле ко всем сторонам элемента и, как правило, приведет к тому же результату!

Выровнять текст

«Подожди, подожди — я * думаю * я уже умею центрировать текст!» , я слышал, как вы говорите.Вы хорошо знаете, что выравнивание текста: центр; можно использовать для гораздо большего?

Есть много важных HTML-элементов, которые по умолчанию настроены как inline display, для которых описанный выше трюк с автоматическим полем не работает. К ним относятся:

• </code> </li> <li> <code> <img> </code> </li> <li> <code> <вход> </code> </li> <li> <code> <выбрать> </code> </li> <li> <code> <кнопка> </code> </li> </ul> <p> Кроме того, вы часто можете захотеть иметь такой элемент, как отображение <code> <div> </code> в виде встроенного блока <strong> </strong> для различных целей стилизации или компоновки, обычно если вы хотите отображать другие элементы в той же строке внутри этого контейнер.</p> <p> Когда это время придет, все, что вам нужно сделать, это использовать <code> text-align: center; </code> на родительском элементе, и он будет горизонтально центрировать дочерний элемент, независимо от того, что это такое, так же, как и текст! </p> <p> <em> Примечание. По сравнению с <code> display: inline </code>, основное отличие состоит в том, что <code> inline-block </code> позволяет установить ширину и высоту элемента и учитывает поля и отступы. Попробуйте изменить отображение на встроенное в CodePen, чтобы увидеть разницу между ними! </em> </p> <h3><span class="ez-toc-section" id="Flexbox"> Flexbox </span></h3> <p> Flexbox — фантастический инструмент для центрирования или позиционирования элементов в большинстве ситуаций, однако людей может запутать, какие свойства гибкости используются при центрировании элемента по вертикали, горизонтали или по обоим направлениям! </p> <p> Причина в том, что это будет зависеть от того, что вы установили как <code> flex-direction </code>.Чтобы объяснить: </p> <p> Если у вас есть контейнер, установленный как <code> flex-direction: row </code> (настройка по умолчанию), тогда ваша главная ось <strong> </strong> является горизонтальной осью x, а поперечная ось <strong> </strong> — вертикальной осью y. </p> <p> Если вы измените этот параметр на <code> flex-direction: column </code>, то вертикальная ось Y станет вашей главной осью <strong> </strong>, а горизонтальная ось X станет вашей поперечной осью <strong> </strong> </p> <p> Это важно для двух основных свойств центрирования: </p> <ul> <li> <code> justify-content: </code>, который позиционирует элемент по его главной оси <em> </em> </li> <li> <code> align-items: </code>, который позиционирует элемент поперек его <em> поперечной оси </em> </li> </ul> <p> Как правило, установка для обоих этих двух свойств значения <code> center </code> всегда будет центрировать элемент в гибком контейнере, однако важно помнить о ключевых различиях между этими двумя свойствами для идеального позиционирования! </p> <p> Если контейнер представляет собой строку, и вы хотите центрировать элементы внутри по горизонтали, используйте <code> justify-content </code>! если это столбец, и вам нужно центрировать по горизонтали, тогда достигните <code> align-items </code>.Надеюсь, теперь вы полностью понимаете причину этого! </p> <h3><span class="ez-toc-section" id="i-32"> Сетка </span></h3> <p> С сеткой все может стать немного сложнее при просмотре вашей страницы в целом, в зависимости от того, сколько столбцов и строк вы можете установить, и многие люди дойдут до flexbox <em> в пределах </em> контейнера сетки для центрирования элементов, однако я бы хотел бы поделиться одним очень быстрым и мощным трюком для идеального центрирования элемента в контейнере сетки. </p> <p> В дополнение к присвоению контейнеру свойства <code> display: grid </code>, просто добавьте свойство <code> place-items: center </code>, которое будет удерживать любой дочерний элемент идеально центрированным.</p> <p> Отличный вариант как для вертикального, так и для горизонтального центрирования элемента в любой ситуации! </p> <h3><span class="ez-toc-section" id="i-33"> Абсолютное центрирование </span></h3> <p> Я оставил свой личный фаворит напоследок из-за гибкости и мощности этой опции. Сначала я представлю код, который объясню позже: <br/> </p><pre> <code> .container { положение: относительное; } .ребенок { позиция: абсолютная; верх: 50%; осталось: 50%; преобразовать: перевести (-50%, -50%) } </code> </pre>Войти в полноэкранный режимВыйти из полноэкранного режима <p> Так что здесь происходит? </p> <p> Ну, во-первых, нам нужно помнить, что всякий раз, когда мы хотим использовать абсолютное позиционирование <code> </code>, важно, чтобы родительский элемент был установлен на <code> position: relative </code>.В противном случае дочерний элемент, скорее всего, будет позиционироваться по отношению ко всему телу документа. </p> <p> Затем мы используем <code> top: 50% </code> & <code> left: 50% </code>, чтобы расположить дочерний элемент в точной средней точке его родительского элемента, однако это означает, что элемент только <em> начнет </em> в этой точке (так что в основном верхний левый угол div). </p> <p> Чтобы исправить это, мы используем <code> transform: translate (-50%, -50%) </code>, чтобы вернуть его на полпути как по оси x, так и по оси y, так что <em> идеально центрируется по </em> внутри родительского элемента.</p> <p> Две причины, почему мне это нравится: </p> <p> Во-первых, это гибкость — если мы хотим центрировать элемент по горизонтали, мы просто используем <code> left: 50% </code> и используем <code> translateX (-50%) </code> — наоборот для вертикального центрирования. </p> <p> Во-вторых, это <em>, идеальный </em> для создания полезных миксинов с Sass / SCSS. Например, у меня есть следующие миксины для любого проекта, над которым я работаю, для быстрого и легкого центрирования, когда оно мне нужно: <br/> </p><pre> <code> @mixin xCenter { позиция: абсолютная; осталось: 50%; преобразовать: translateX (-50%) } @mixin yCenter { позиция: абсолютная; верх: 50%; преобразовать: translateY (-50%) } @mixin absCenter { позиция: абсолютная; верх: 50%; осталось: 50%; преобразовать: перевести (-50%, -50%) } </code> </pre>Войти в полноэкранный режимВыйти из полноэкранного режима <p>, то каждый раз, когда нам нужно точно центрировать элемент, мы можем просто использовать <code> @include absCenter </code> и привет, готово! </p> <p> Я действительно надеюсь, что это было полезно, и сообщу, есть ли какие-либо другие полезные советы, приемы или магия CSS, которые, по вашему мнению, должны быть включены! </p> <h2><span class="ez-toc-section" id="CSS_Block_Align_Left_Center_Right"> CSS Block — Align (Left, Center, Right) </span></h2> <p> <ol> <li> Дом </li> <li> Что такое Интернет? (www, w3) </li> <li> CSS — Каскадные таблицы стилей — Интерфейс языка разметки (HTML | XML) </li> <li> CSS — макет блока </li> </ol> </p> <h3><span class="ez-toc-section" id="1"> 1 — Около </span></h3> <p> Как выровнять визуальный элемент с отображением блока </p> <p> Это блочная часть изделия для горизонтального позиционирования. </p> <p> Вы можете выровнять визуальный элемент на двух уровнях: </p> <h3><span class="ez-toc-section" id="2"> 2 — Статьи по теме </span></h3> <p> <strong> Комбинированный плагин — Связано с компонентом: ничего не найдено.</strong> </p> <h3><span class="ez-toc-section" id="3"> 3 — уровень </span></h3> <h4><span class="ez-toc-section" id="31"> 3.1 — Коробка </span></h4> <h5><span class="ez-toc-section" id="311"> 3.1.1 — Центр коробки </span></h5> <p> Поле будет центрировано, а не содержимое. Поскольку коробка по умолчанию занимает 100% своего пространства, вам нужно установить ширину, чтобы увидеть эффект. </p> <p> </p> <p> Ширина содержимого составляет <mark> 1110 </mark>, даже если max-width составляет <mark> 1140 </mark> из-за заполнения, поскольку размер поля установлен на <mark> border-box </mark> </p> <p> <МАТЕРИАЛ> 1110 = 1140-15-15 </MATH> </p> <p> Для размещения ящика использовался следующий элемент: </p> <p> Выполнение: </p><pre data-download-link="true" data-src="file.css"> <code>.center-box { маржа слева: авто; маржа-право: авто; / * или маржа: 0 авто; * / ширина: подходящее содержание; граница: сплошной черный 1px; } </code> </pre><pre data-download-link="true" data-src="file.html"> <code> <h2><span class="ez-toc-section" id="i-34"> Центр </span></h2> </code> </pre><h5><span class="ez-toc-section" id="_4"> Бутстрап 4 </span></h5> <p> Если вы используете бутстрап, вы можете использовать служебный класс <mark> mx-auto </mark>. </p><pre data-download-link="true" data-src="file.html"> <code> класс = "mx-auto" </code> </pre><h5><span class="ez-toc-section" id="312"> 3.1.2 — Коробка правая </span></h5><pre data-download-link="true" data-src="file.css"> <code> .right-box { маржа слева: авто; ширина: подходящее содержание; граница: сплошной черный 1px; } </code> </pre><pre data-download-link="true" data-src="file.html"> <code> <h2><span class="ez-toc-section" id="i-35"> Правый </span></h2> </code> </pre><h4><span class="ez-toc-section" id="32"> 3.2 — Текст </span></h4> <p> По умолчанию поле занимает 100% его пространства, вы можете выровнять текст с помощью свойства <mark> text-align </mark> </p><pre data-download-link="true" data-src="file.css"> <code> h2 { выравнивание текста: центр; граница: сплошной черный 1px; } </code> </pre><pre data-download-link="true" data-src="file.html"> <code> <h2><span class="ez-toc-section" id="i-36"> Центр </span></h2> </code> </pre><h2><span class="ez-toc-section" id="_CSS_Dorward"> Центрирование с использованием CSS | Dorward </span></h2> <h3><span class="ez-toc-section" id="i-37"> Введение </span></h3> <p> Назад во времена HTML 3.x и переходных вариантов HTML 4.x и XHTML 1.0 ряд элементов поддерживал <code> выровнять атрибут </code>.Как он действовал, зависело от того, какой элемент он был применен, и прямого перевода для CSS нет. Как ты центр элементов зависит от типа элемента. </p> <p> Обратите внимание, что для краткости примеры в этом документе делают использование встроенного стиля. На практике встроенный стиль не приветствуется и вам следует использовать внешние таблицы стилей. </p> <h3><span class="ez-toc-section" id="i-38"> Встроенное содержимое </span></h3> <p> Встроенное содержимое включает в себя такие вещи, как текст, изображения, <code> <strong> </code> и <code> <span> </code>.В центр встроенный контент использует свойство CSS <code> text-align </code>, примененное к контейнер <strong> уровня блока </strong> с содержимым, которое будет выровнен внутри. </p><pre> <code> <h2><span class="ez-toc-section" id="i-39"> Мой заголовок </span></h2> </code> </pre><p> Да, плохо названо. «inline-align», вероятно, был бы лучшим выбором. </p> <p> Уточнение: хотя свойство <code> text-align </code> применяется к <code> <h2> </h2> </code>, содержимое, которое оно позиционирует, является текстом внутри элемента, а не самим элементом.</p> <h3><span class="ez-toc-section" id="i-40"> Содержание уровня блока </span></h3> <p> Контент уровня блока включает в себя такие элементы, как <code> <h2> </h2> </code>, <code> <h3> </h3></code>, <code> <p> </code>, <code> <таблица> </code> и <code> <div> </code>. На уровень центрального блока элементы устанавливают свои левое и правое поля на <code> auto </code> (но см. IE Ошибки). </p><pre> <code> <h2><span class="ez-toc-section" id="i-41"> Мой заголовок </span></h2> </code> </pre><p> Однако ширина по умолчанию для большинства элементов уровня блока — auto, который заполняет доступную область на экране.Просто быть центрированным помещает это в том же положении, что и при выравнивании по левому краю. Если хотите, чтобы это было визуально по центру следует установить ширину <code> </code> (или <code> max-width </code>, хотя Internet Explorer 6 и более ранние версии этого не делают поддерживают это, а IE 7 поддерживает это только в стандартном режиме). </p><pre> <code> <h2><span class="ez-toc-section" id="i-42"> Мой заголовок </span></h2> </code> </pre><h4><span class="ez-toc-section" id="i-43"> Встроенное содержимое и блок, в котором оно находится </span></h4> <p> Распространенная ошибка, которую делают люди после прочтения этой статьи, — это думать, что «Я хочу центрировать текст внутри моего <h2><span class="ez-toc-section" id="i-44">, это блок, поэтому я необходимо изменить поля.». Тогда для пояснения повторю: </span></h2><strong> текст </strong> — это встроенный контент. </p> <p> На изображении выше есть три элемента уровня блока. Чтобы сделать это ясно, что происходит, их ширина ограничена (<em> помните: это не по умолчанию, за исключением таблиц </em>), и добавляется граница. </p> <p> Верхний элемент (X) имеет встроенное содержимое по центру. По умолчанию большинство элементов уровня блока, <code> <table> </code>, являясь очевидным исключением, имеют ширину пространство, доступное для их размещения, поэтому обычно содержимое на экране.</p><pre> <code> <h2><span class="ez-toc-section" id="i-45"> Икс </span></h2> </code> </pre><p> Нижний элемент (Z) центрируется блочно. Обратите внимание, что текст внутри все еще с выравниванием по левому краю. Если бы ширина не была ограничена, это центрирование было бы не оказывают видимого воздействия на элемент. </p><pre> <code> <h2><span class="ez-toc-section" id="Z"> Z </span></h2> </code> </pre><p> Средний элемент (Y) имеет внутреннее содержимое по центру и сосредоточился на блочной технике. </p><pre> <code> <h2><span class="ez-toc-section" id="Y"> Y </span></h2> </code> </pre><h4><span class="ez-toc-section" id="_Internet_Explorer"> Ошибки Internet Explorer и содержимое уровня блокировки </span></h4> <p> К сожалению, наиболее часто используемый браузер на рынке — Microsoft Internet Explorer для Windows — имеет довольно серьезную ошибку относительно обработки элементов уровня блока и полей.В зависимости от в версии и режиме он может обрабатывать такие элементы как встроенный контент относительно центрирования. IE использует режим, основанный на DOCTYPE. предоставленный в верхней части HTML-документа, это называется переключением типа Doctype. </p> <table summary="The bug affects all versions of MSIE/Win except 6 and newer when it in standards mode."> <caption> Затронутые версии </caption> <thead> <tr> <th scope="col"> Версия </th> <th scope="col"> Режим </th> <th scope="col"> Появляется ошибка </th> </tr> </thead> <tbody> <tr> <td scope="row"> 4 — 5,5 </td> <td> н / д </td> <td> Да </td> </tr> <tr> <td scope="row"> 6-7 </td> <td> Причуды </td> <td> Да </td> </tr> <tr> <td scope="row"> 6-7 </td> <td> Стандарты </td> <td> Нет </td> </tr>5 <p> Когда срабатывает ошибка: </p> <ul> <li> Авто маржа будет <strong> не </strong> работать </li> <li> Text-align будет (неправильно) влиять на положение потомков блока </li> </ul> <p> Если ошибка не возникает, в Internet Explorer: </p> <ul> <li> Авто маржа будет работать </li> <li> Text-align будет (неправильно) влиять на положение потомков блока </li> </ul> <p> В других браузерах: </p> <ul> <li> Авто маржа будет работать </li> <li> Text-align будет <strong> не </strong> влиять на положение потомков блока </li> </ul> <p> Это можно обойти, но оба метода неприятны. взломать.</p> <h5><span class="ez-toc-section" id="_CSS"> Встроенный CSS-хак </span></h5> <p> Поскольку браузер обрабатывает элементы уровня блока как встроенный контент (как что касается центрирования), на них влияет <code> text-align </code> свойство, поэтому элемент может быть помещен в контейнер и центрируется с помощью <code> text-align </code>. Затем элемент должен иметь свой собственный <code> text-align </code> reset до <code> ушел </code>. </p><pre> <code> <div> <div> </div> </div> </code> </pre><p> NB: <code> маржа: 1em авто; </code> устанавливает для верхнего и нижнего поля значение <code> 1em </code>, а для левого и правого поля — <code> auto </code>.Он используется здесь, потому что расширенный пример вызывал горизонтальную прокрутку в большом количестве систем. </p> <h5><span class="ez-toc-section" id="_JavaScript"> Взлом JavaScript </span></h5> <p> Метод, позволяющий сохранить разметку в некоторой степени чище, но за счет отказа в случае отключения JavaScript, — это сценарий исправления полей Internet Explorer Дэвида Шонцлера. </p> <h3><span class="ez-toc-section" id="i-46"> Сводка </span></h3> <ul> <li> <code> левое поле: авто; маржа-право: авто; </code> центрирует элемент уровня блока. </li> <li> <code> выравнивание текста: по центру; </code> центрирует встроенное содержимое элемента уровня блока.</li> <li> MSIE имеет ошибки, из-за которых при некоторых обстоятельствах он обрабатывает содержимое уровня блока как встроенное содержимое (для центрирования). </li> </ul> <h2><span class="ez-toc-section" id="_CSS-2"> Полное руководство по центрированию в CSS </span></h2> <p> Приготовьтесь узнать, как подойти к давнему вопросу, с которым сталкиваются многие практикующие CSS: <br/> «Как центрировать div?» </p> <h3><span class="ez-toc-section" id="i-47"> Охваченные случаи использования # </span></h3> <ol> <li> По вертикали и горизонтали (XY) </li> <li> Вертикальное центрирование (Y) </li> <li> Горизонтальное центрирование (X) </li> </ol> <h3><span class="ez-toc-section" id="_XY"> Вертикально и горизонтально (XY) # </span></h3> <p> Святой Грааль: вертикальное и горизонтальное центрирование, также известное как центрирование по оси x <code> </code> и оси y </code> </code>.</p> <h4><span class="ez-toc-section" id="i-48"> Решение для координатной сетки № </span></h4> <p> <em> самый современный </em> и <em> самый простой способ </em> со следующими <strong> двумя строками </strong> CSS: </p><pre> <code> дисплей: сетка; <br/> место-содержание: центр; </code> </pre><p> Мы в центре! </p> <p> Мы в центре! </p> <h5><span class="ez-toc-section" id="i-49"> Попался </span></h5> <p> <strong> Сворачивание дочерней сетки </strong> с использованием <code> автозаполнения </code> или <code> автозаполнения </code> </p> <p> Учитывая дочернюю сетку, в которой используются следующие стили: </p><pre> <code> столбцы-шаблон-сетки: повторение ([автоподгонка или автозаполнение], minmax (10ch, 1fr)); </code> </pre><p> Дочерняя сетка схлопнется сама по себе, в данном случае до <code> min </code> части <code> minmax </code>, из-за <code> justify-content </code>, установленного в сокращении <code> place-content </code>.</p> <p> Исправление двоякое: переключите технику центрирования сетки на использование <code> place-items </code> вместо <code> place-content </code>, а затем специально укажите, что дочерняя сетка должна быть: </p><pre> <code> ширина: 100%; </code> </pre><p> Или что угодно в качестве значения ширины, чтобы освободить место для столбцов сетки. </p> <blockquote> <p> <strong> Хотели бы вы, чтобы советы по CSS были в вашем почтовом ящике? </strong> Присоединяйтесь к моему информационному бюллетеню, чтобы получать обновления статей, советы по CSS и внешние ресурсы! </p> </blockquote> <h4><span class="ez-toc-section" id="_XY_Flexbox"> Решение XY Flexbox № </span></h4> <p> В качестве альтернативы вы можете использовать немного более подробную версию Flexbox: </p><pre> <code> дисплей: гибкий; <br/> align-items: center; <br/> justify-content: center; </code> </pre><h5><span class="ez-toc-section" id="i-50"> Попался </span></h5> <p> Flexbox ведет себя немного иначе, когда добавляется второй элемент, поскольку гибкие элементы по умолчанию размещаются вдоль оси x: </p> <p> Мы в центре! </p> <p>…Вроде, как бы, что-то вроде! </p> <p> Один из способов решить эту проблему — добавить: </p><pre> <code> flex-direction: столбец; </code> </pre><p> В качестве альтернативы, оберните дочерние элементы в один элемент, особенно если вы не хотите, чтобы на них влияло внешнее выравнивание flexbox. </p> <p> Если дочерний элемент использует сетку с <code> автозаполнением </code> или <code> автозаполнением </code>, он столкнется с той же проблемой, что и когда родительский контейнер является сеткой, как описано ранее. </p> <h4><span class="ez-toc-section" id="_Flexbox_XY"> Альтернативное решение Flexbox для XY # </span></h4> <p> <code> margin: auto </code> уникален для flexbox, и если у вас только один дочерний элемент, вы можете сделать следующее: </p><pre> <code>.родительский дисплей {<br/>: гибкий; <br/>} <p> .child {<br/> маржа: авто; <br/>} </p> </code> </pre><p> Поведение <code> auto </code> для дочерних элементов flex, в отличие от дочерних элементов блочных элементов, также может применяться вертикально, что позволяет этому решению работать. </p> <h4><span class="ez-toc-section" id="_XY-2"> Центрирование по XY для блочных элементов # </span></h4> <p> Если вы не можете переключиться на сетку или раскладку flexbox, вот современное решение <em> </em> для этой классической проблемы. </p> <p> Убедитесь, что дочерние элементы заключены в содержащий элемент, чтобы работало следующее: </p><pre> <code>.родительская позиция {<br/>: относительная; <br/>} <p> .child-wrapper {<br/> позиция: абсолютная; <br/> верх: 50%; <br/> осталось: 50%; <br/> преобразование: перевод (-50%, -50%); <br/>} </p> </code> </pre><p> Я по центру вертикально! </p> <p> Я тоже! </p> <p> Эта комбинация работает, потому что когда процентное значение предоставляется в определение <code> translate </code>, оно основано на вычисленной ширине (<code> translateX </code>) или высоте (<code> translateY </code>). В этом примере мы используем сокращение для применения значений <code> x </code> и <code> y </code> к <code> translate () </code>.</p> <p> Абсолютное позиционирование выводит элемент из обычного потока документов, после чего мы можем применять точные значения (по мере необходимости) для управления его позиционированием в документе или, в этом случае, относительно родительского элемента с требуемой позицией <code>: относительное </code> на родительском элемент. </p> <p> После абсолютного позиционирования дочернего элемента из верхних 50% и оставшихся 50%, что составляет 50% высоты и ширины родительского элемента, соответственно, мы затем используем <code> translate (-50%, -50%) </code>, чтобы подтянуть дочерний элемент обратно вверх. 50% собственной высоты, а задняя часть оставила 50% собственной ширины.Это приводит к центрированию внешнего вида, масштабируемому вместе с содержимым. </p> <h5><span class="ez-toc-section" id="i-51"> Попался </span></h5> <p> Поскольку мы использовали абсолютное позиционирование, есть вероятность, что контент вырастет до переполнения родительского, даже если, как в демонстрации, родительский элемент имеет минимальную ширину <code> </code>, которая обычно увеличивается с содержимым <em>, за исключением </em> для абсолютных дочерних элементов. </p> <p> Исправление: используйте сетку или flexbox 🙂 Или подготовьтесь к созданию #allthemediaqueries. </p> <h3><span class="ez-toc-section" id="_Y"> Вертикальное центрирование (Y) # </span></h3> <p> Решения для вертикального центрирования, также известного как <code> по оси Y </code>.</p> <h4><span class="ez-toc-section" id="_Y-2"> Решение Y-сетки № </span></h4> <p> Нам нужно только одно свойство для вертикального выравнивания в сетке: </p><pre> <code> align-content: center; </code> </pre><p> Я по центру вертикально! </p> <p> Я тоже! </p> <p> Использование <code> align-content </code> масштабируется для нескольких дочерних элементов. </p> <p> Это также работает, если мы переключим ось сетки по умолчанию на <code> x </code> с: </p><pre> <code> сетка-автопоток: колонка; </code> </pre><p> Я по центру вертикально! </p> <p> Я тоже! </p> <h4><span class="ez-toc-section" id="Y_Flexbox"> Y Решение Flexbox № </span></h4> <p> Элементы Flexbox можно выровнять по вертикали: </p><pre> <code> align-items: center; </code> </pre><p> Я по центру вертикально! </p> <p> Я тоже! </p> <h5><span class="ez-toc-section" id="i-52"> Попался </span></h5> <p> Если вы переключите ось по умолчанию, добавив <code> flex-direction: column </code>, это решение не сработает.</p> <p> Теперь я по центру … по горизонтали? </p> <p> Хм, я тоже … </p> <p> Отсутствует огромное количество проблем при работе с flexbox, когда поворот оси по умолчанию переворачивает связанные свойства. </p> <p> Для <code> column </code> или <code> y-axis </code> flex layout, вместо <code> align-items </code> нам теперь нужно использовать: </p><pre> <code> justify-content: center; </code> </pre><p> Я по центру вертикально! </p> <p> Я тоже! </p> <h4><span class="ez-toc-section" id="_Y-3"> Центровка по оси Y для блочных элементов # </span></h4> <p> Если возможно, переключите модель макета и используйте гибкую или сетку.</p> <p> В противном случае, как и в решении XY, мы будем использовать абсолютное позиционирование и преобразование, но применим только к <code> translateY </code> для перемещения дочернего элемента на 50% его высоты. </p><pre> <code>. Родительский {<br/> позиция: относительная; <br/>} <p> .child-wrapper {<br/> позиция: абсолютная; <br/> верх: 50%; <br/> преобразование: translateY (-50%); <br/>} </p> </code> </pre><p> Я по центру вертикально! </p> <p> Я тоже! </p> <p> См. «Центрирование XY для блочных элементов», чтобы узнать, почему это работает.</p> <h3><span class="ez-toc-section" id="_X"> Горизонтальное центрирование (X) # </span></h3> <p> Решения для горизонтального центрирования, также известного как <code> по оси x </code>. </p> <h4><span class="ez-toc-section" id="X"> X Сетевое решение № </span></h4> <p> Свойства выравнивания <code> - </code> предназначены для выравнивания <code> по оси X </code>: </p><pre> <code> justify-content: center; </code> </pre><p> Я по центру по горизонтали! </p> <p> Я тоже! </p> <p> Опять же, это работает, если мы переключим ось по умолчанию с помощью: </p><pre> <code> сетка-автопоток: колонка; </code> </pre><p> Я по центру по горизонтали! </p> <p> Я тоже! </p> <h4><span class="ez-toc-section" id="X_Flexbox"> X Flexbox, решение № </span></h4> <p> Для центрирования по оси x <code> </code>, которая является осью flexbox по умолчанию для выравнивания дочерних элементов, используйте: </p><pre> <code> justify-content: center; </code> </pre><p> Я по центру по горизонтали! </p> <p> Я тоже! </p> <h5><span class="ez-toc-section" id="i-53"> Попался </span></h5> <p> На этом этапе вы знаете, что произойдет — это не удастся для <code> flex-direction: column </code>.</p> <p> Мы исправим это, используя вместо <code> justify-content </code>: </p><pre> <code> align-items: center; </code> </pre><p> Я по центру по горизонтали! </p> <p> Я тоже! </p> <h4><span class="ez-toc-section" id="X-2"> X Центрирование для блочных элементов # </span></h4> <p> Это классическое решение, хотя его необходимо разместить на каждом элементе, который вы хотите центрировать индивидуально. </p><pre> <code> левое поле: авто; <br/> поле справа: авто; </code> </pre><p> Для демонстрации я также установил максимальную ширину <code> </code>, поскольку по умолчанию элементы блока занимают всю ширину своего контейнера, что визуально противоречит центрированию.</p> <p> Я по центру по горизонтали! </p> <p> Я тоже! </p> <h4><span class="ez-toc-section" id="_X-2"> Центрирование по оси X для динамически позиционируемых элементов # </span></h4> <p> Вариант использования здесь — для таких компонентов, как раскрывающиеся меню или всплывающие подсказки, когда требуется центрирование элементов динамической / неизвестной ширины относительно связанного триггера. </p> <p> Мы будем использовать метод, аналогичный центрированию по оси Y для элементов блока, но с использованием <code> left </code> и <code> translateX </code> свойств: </p><pre> <code>. Родительский {<br/> позиция: относительная; <br/>} <p>.дочерняя оболочка {<br/> позиция: абсолютная; <br/> осталось: 50%; <br/> преобразование: translateX (-50%); <br/>} </p> </code> </pre><p> Я по центру вертикально! </p> <p> Я тоже! </p> <h2><span class="ez-toc-section" id="_Div_CSS"> Как центрировать несколько Div с помощью CSS </span></h2> Обновление <p>: это старая статья. Теперь вы можете легко центрировать несколько div с помощью Flexbox. </p> <p> </p> В какой-то момент может возникнуть ситуация, когда вы захотите центрировать несколько элементов (возможно, <code> <div> </code> элементов или других блочных элементов) на одной линии в области фиксированной ширины.Центрировать отдельный элемент в фиксированной области очень просто. Просто добавьте <code> margin: auto </code> и фиксированную ширину к элементу, который вы хотите центрировать, и поля заставят элемент центрироваться. <p> На самом деле должен быть аналогичный простой способ центрировать несколько равномерно расположенных элементов. Было бы неплохо, если бы в CSS было свойство с названием «box-align», которое можно было бы установить в «center», тогда дочерние элементы будут равномерно центрированы внутри их родителя. </p> <p> Что ж, вы можете добиться чего-то подобного, воспользовавшись гибкостью CSS с «переделкой» элементов (за неимением лучшего термина).Посмотрите демонстрацию того, что я буду описывать в этом коротком руководстве. </p> <h3><span class="ez-toc-section" id="i-54"> Обычный способ центрировать несколько блоков </span></h3> <p> Обычно в такой ситуации вы просто перемещаете поля, а затем добавляете левое и правое поля, чтобы соответственно разнести их. Но это может стать немного запутанным, потому что IE6 не любит поля для чисел с плавающей запятой, и вам всегда нужно иметь другой идентификатор или класс для элементов, для которых вам не нужны поля (например, последний и / или первый). </p> <p> Вы можете обойти проблему IE6, добавив <code> display: inline </code> в объявление только для IE6, но ваш код все равно будет несколько беспорядочным из-за дополнительного кода, который заставляет вести себя первый и / или последний элемент.Кроме того, последнее поле может упасть на следующую строку в IE. </p> <p> Есть другое решение, которое может работать лучше при определенных обстоятельствах. </p> <h3><span class="ez-toc-section" id="i-55"> Используйте </span></h3><code> встроенный блок </code> и управляйте пустым пространством </h3> <p> Для достижения того же эффекта, что и при добавлении плавающих полей и полей, вы можете просто «преобразовать» элементы уровня блока как встроенные блоки, а затем манипулировать пустым пространством между ними. Вот как может выглядеть CSS: </p><pre> <code> #parent { ширина: 615 пикселей; граница: сплошная 1px #aaa; выравнивание текста: центр; размер шрифта: 20 пикселей; межбуквенный интервал: 35 пикселей; белое пространство: nowrap; высота строки: 12 пикселей; переполнение: скрыто; } .ребенок { ширина: 100 пикселей; высота: 100 пикселей; граница: сплошная 1px #ccc; дисплей: встроенный блок; вертикальное выравнивание: по центру; } </code> </pre><p> В моем примере выше я предполагаю, что есть четыре дочерних блока, каждый с дочерним элементом класса <code> </code> и каждый 100 пикселей на 100 пикселей. Боксы, естественно, являются элементами блочного уровня, но CSS изменяет их на <code> inline-block </code>, что позволяет им естественным образом перемещаться с текстом и пробелами. Конечно, поскольку у нас нет текста в родительском контейнере, управление текстом и пробелами не будет проблемой.</p> <p> У родительского элемента (с идентификатором <code> родительского элемента </code> в этом примере) установлено четыре ключевых свойства текста, а у дочерних элементов — два: </p> <ul> <li> <code> text-align </code> выравнивает все встроенные дочерние элементы по центру </li> <li> <code> межбуквенный интервал </code> управляет размером каждой единицы белого пространства между полями </li> <li> <code> white-space: nowrap </code> предотвращает возможное падение последнего элемента на следующую строку </li> <li> <code> переполнение: скрыто </code> предотвращает растяжение поля в IE6 </li> <li> <code> vertical-align: middle </code> (на дочерних элементах) удерживает блоки в одной вертикальной плоскости друг с другом при добавлении содержимого </li> <li> <code> дисплей: встроенный блок </code> (очевидно) </li> </ul> <h3><span class="ez-toc-section" id="Internet_Explorer"> Internet Explorer поднимает свою уродливую голову </span></h3> <p> Каким было бы решение CSS без проблемы с Internet Explorer, которую нужно было бы обойти? Хотя этот метод работает одинаково во всех браузерах (включая IE8), IE6 и IE7 не взаимодействуют друг с другом, потому что они не полностью поддерживают <code> inline-block </code>.Чтобы эти браузеры показывали практически тот же результат, вам нужно добавить следующий CSS: </p><pre> <code> .child { * дисплей: встроенный; * поле: 0 20 пикселей 0 20 пикселей; } </code> </pre><p> Приведенный выше CSS должен применяться только к IE6 и IE7, и он должен располагаться после другого CSS. В моем коде (и в приведенном выше примере кода) я добился этого с помощью звездного хака. Звездочка (или звездочка) в начале каждой строки скрывает обе строки из всех браузеров, кроме IE6 и IE7. Добавленные здесь поля помогают нам получить тот же визуальный результат, а новое свойство <code> display </code> использует ошибку в тех браузерах, которая заставляет элемент блока работать так же, как его встроенный, когда вы объявляете <code> display: inline-block </code>, за которым следует <code> дисплей: встроенный </code>.</p> <h3><span class="ez-toc-section" id="i-56"> Недостатки / Последние мысли </span></h3> <p> Не так много недостатков в использовании этого метода для центрирования нескольких div. Вам просто нужно убедиться, что настройки пустого пространства и текста, которые вы применяете, сброшены для любых дочерних элементов внутри полей. Таким образом, хотя это может работать, когда у вас есть прямые изображения или другой нетекстовый контент, это может быть больше проблем, чем того стоит, если ваши блоки полностью загружены разнообразным контентом. </p> <p> Но, тем не менее, это хороший способ узнать, когда вам нужно центрировать некоторые элементы блока с равным интервалом, и вы не хотите применять дополнительные классы к конечным элементам.И этот прием станет еще более важным, когда старые версии IE исчезнут из общего пользования. Но я не задерживаю дыхание. </p> <h2><span class="ez-toc-section" id="i-57"> Как вертикально центрировать встроенные элементы (встроенный блок) </span></h2> <p> Существует множество различных методов, которые вы можете использовать для выравнивания встроенных (встроенных блоков) элементов по вертикали. В этом фрагменте мы продемонстрируем некоторые широко используемые решения такого рода проблем с выравниванием. </p> <h3><span class="ez-toc-section" id="_CSS-3"> Решение со свойством заполнения CSS¶ </span></h3> <p> Иногда встроенные элементы (inline-block) могут отображаться вертикально по центру из-за равного заполнения над и под ними.</p> <h4><span class="ez-toc-section" id="_padding"> Пример вертикального центрирования встроенных элементов с помощью свойства padding: </span></h4><pre content="code snippet"> <code> <! DOCTYPE html> <html> <head> <title> Название документа </title> <стиль> тело { фон: # c2c2c2; размер шрифта: 90%; } основной { фон: #fff; маржа: 20px 0; отступ: 50 пикселей; } main a { фон: # 83d483; цвет: #fff; отступ: 40 пикселей 30 пикселей; текстовое оформление: нет; } </style> </head> <body> <основной> <a href="#0"> 1 </a> <a href="#0"> 2 </a> <a href="#0"> 3 </a> </main> <script defer src="https://ylianova.ru/wp-content/cache/autoptimize/js/autoptimize_a42279962dee2f32b145603e9952a81c.js"></script></body> </html> </code> </pre>Попробуйте сами » <h4><span class="ez-toc-section" id="i-58"> Результат </span></h4> <h3><span class="ez-toc-section" id="_CSS_line-height_height"> Решение с использованием свойств CSS line-height и height </span></h3> <p> Другой способ решить вашу проблему с вертикальным выравниванием — установить свойство line-height равным высоте.Используйте этот метод для центрирования текста в том случае, если вы уверены, что ваш текст не будет переноситься. </p> <h4><span class="ez-toc-section" id="_line-height_height"> Пример вертикального центрирования встроенного элемента со свойствами line-height и height: </span></h4><pre content="code snippet"> <code> <! DOCTYPE html> <html> <head> <title> Название документа </title> <стиль> тело { фон: # c2c2c2; размер шрифта: 90%; } основной { фон: #fff; маржа: 20px 0; отступ: 40 пикселей; } main span { дисплей: встроенный блок; фон: # 83d483; цвет: #fff; высота: 100 пикселей; высота строки: 100 пикселей; отступ: 20 пикселей; ширина: 50%; белое пространство: nowrap; } </style> </head> <body> <основной> <span> Пример вертикально центрированной линии.</span> </main> </body> </html> </code> </pre>Попробуйте сами » <h3><span class="ez-toc-section" id="_CSS_vertical-align"> Решение со свойством CSS vertical-align¶ </span></h3> <p> Свойство CSS vertical-align применяется к выравниваемым элементам, а не к их родительскому элементу. </p> <p> Здесь мы выравниваем элементы <a> и <span> внутри <div>. В нашем примере вертикальное выравнивание выполняется относительно текущей текстовой строки, а не полной высоты родительского элемента. Но если вы хотите, чтобы родительский элемент был выше, а его элементы были центрированы по вертикали, вы можете установить свойство line-height на <div> вместо высоты.</p> <h4><span class="ez-toc-section" id="_inline_inline-block_vertical-align"> Пример вертикального центрирования элементов inline и inline-block с помощью свойства vertical-align: </span></h4><pre content="code snippet"> <code> <! DOCTYPE html> <html> <head> <title> Название документа </title> <стиль> div { фон: #dbdbdb; маржа: 10 пикселей; высота строки: 100 пикселей; } div> * { вертикальное выравнивание: по центру; высота строки: нормальный; } a { цвет фона: # 83d483; высота: 20 пикселей; дисплей: встроенный блок; граница: сплошная 1px # 666; отступ: 5 пикселей; } охватывать { фон: # 6fa2bf; } </style> </head> <body> <div> <a href="#"> Некоторая ссылка </a> <span> Немного текста </span> </div> </body> </html> </code> </pre>Попробуйте сами »<p> В следующем примере мы выровняли несколько строк текста по центру по вертикали в элементе <td> и в макете таблицы, созданном с помощью CSS.Здесь мы устанавливаем отображение на «table-cell» для нашего элемента <p> и свойство vertical-align на «middle». Но мы не используем свойство vertical-align в элементе <td>, так как по умолчанию оно размещается посередине. </p> <h4><span class="ez-toc-section" id="i-59"> Пример вертикального центрирования содержимого внутри элементов </span></h4><p> и <td>: </h4><pre content="code snippet"> <code> <! DOCTYPE html> <html> <head> <title> Название документа </title> <стиль> тело { фон: # c2c2c2; размер шрифта: 90%; } Таблица { фон: #fff; ширина: 200 пикселей; граница-коллапс: раздельный; маржа: 15 пикселей; высота: 200 пикселей; } table td { фон: # 83d483; цвет: #fff; отступ: 15 пикселей; граница: 5px solid #fff; } .center-table { дисплей: таблица; высота: 200 пикселей; фон: #fff; ширина: 200 пикселей; маржа: 20 пикселей; } .center-table p { дисплей: таблица-ячейка; маржа: 0; фон: # 83d483; цвет: #fff; отступ: 20 пикселей; граница: 5px solid #fff; вертикальное выравнивание: по центру; } </style> </head> <body> <таблица> <tr> <td> Пример вертикально центрированных нескольких строк текста в ячейке таблицы.</td> </tr> </table> <div> <p> Пример вертикально центрированных нескольких строк текста в макете таблицы, созданном с помощью CSS. </p> </div> </body> </html> </code> </pre>Попробуйте сами » <h3><span class="ez-toc-section" id="_CSS_Flexbox"> Решение с CSS Flexbox¶ </span></h3> <p> Вертикальное выравнивание встроенных элементов также возможно с помощью Flexbox. Вы можете легко использовать один гибкий дочерний элемент, чтобы центрировать его в гибком родительском элементе. </p> <h4><span class="ez-toc-section" id="_Flexbox-3"> Пример вертикального центрирования встроенных элементов с помощью Flexbox: </span></h4><pre content="code snippet"> <code> <! DOCTYPE html> <html> <head> <title> Название документа </title> <стиль> тело { фон: # c2c2c2; размер шрифта: 90%; } div { фон: #fff; ширина: 200 пикселей; маржа: 20 пикселей; } .flex-center { фон: # 83d483; цвет: #fff; граница: 5px solid #fff; дисплей: гибкий; flex-direction: столбец; justify-content: center; высота: 200 пикселей; изменить размер: по вертикали; перелив: авто; } .flex-center span { маржа: 0; отступ: 15 пикселей; } </style> </head> <body> <div> <span> Пример вертикально центрированных нескольких строк в контейнере flexbox.</span> </div> </body> </html> </code> </pre>Попробуйте сами »<p> Это актуально только в том случае, если родительский контейнер имеет фиксированную высоту. </p> <h3><span class="ez-toc-section" id="i-60"> Решение с методом «призрачного элемента» </span></h3> <p> Этот метод предполагает, что псевдоэлементу (в нашем примере это: before) задана полная высота. Он помещается в контейнер, и текст выравнивается по нему. В следующем примере у нас есть элемент <p>, который является элементом уровня блока, но мы делаем его встроенным в блок, используя свойство display.</p> <h4><span class="ez-toc-section" id="i-61"> Пример вертикального центрирования встроенных элементов с «призрачным элементом»: </span></h4><pre content="code snippet"> <code> <! DOCTYPE html> <html> <head> <title> Название документа </title> <стиль> тело { фон: # c2c2c2; размер шрифта: 90%; } div { фон: #fff; ширина: 240 пикселей; высота: 200 пикселей; маржа: 15 пикселей; цвет: #fff; изменить размер: по вертикали; перелив: авто; отступ: 20 пикселей; } .ghost-center { положение: относительное; } .ghost-center :: before { содержание: " "; дисплей: встроенный блок; высота: 100%; ширина: 1%; вертикальное выравнивание: по центру; } .ghost-center p { дисплей: встроенный блок; вертикальное выравнивание: по центру; ширина: 190 пикселей; маржа: 0; отступ: 10 пикселей; фон: # 83d483; } </style> </head> <body> <div> <p> Пример вертикально центрированных нескольких строк в контейнере.</p> </div> </body> </html> </code> </pre>Попробуйте сами » <h2><span class="ez-toc-section" id="Center_a_Div_Twitter_Bootstrap_3"> Center a Div, Twitter Bootstrap 3 </span></h2> <time itemprop="dateModified" datetime="February 26 2020 08:08:56."> Последнее обновление 26 февраля 2020 г. 08:08:56 (UTC / GMT +8 часов) </time> <h3 itemscope="" itemtype="http://schema.org/WebPageElement/Heading"><span class="ez-toc-section" id="i-62"> Объектив </span></h3> <p> Используя вспомогательный класс <code> center-block </code> Twitter Bootstrap, который доступен в Bootstrap 3.2, вы можете центрировать div. </p> <p> класс центрального блока содержит следующий код css </p><pre> <code> .center-block { дисплей: блок; маржа-право: авто; маржа слева: авто; } </code> </pre><p> Из приведенного выше кода очевидно, что этот класс гарантирует, что связанный блок отображается как элемент уровня блока, и у него должны быть установлены поля, необходимые для размещения его в центре.</p> <p> В следующем коде показано, как использовать центральный блок <code> </code> </p><pre> <code> <! DOCTYPE html> <html lang = "ru"> <head> <meta charset = "utf-8"> <meta http-Equiv = "X-UA-Compatible" content = "IE = edge"> <meta name = "viewport" content = "width = device-width, initial-scale = 1"> <title> Центрировать Div в Twitter Bootstrap 3 </title> <! - Bootstrap -> <! - Поддержка HTML5 Shim и Respond.js IE8 для элементов HTML5 и медиа-запросов -> <! - ВНИМАНИЕ: Respond.js не работает, если вы просматриваете страницу через file: // -> <! - [если lt IE 9]> <! [endif] -> </head> <body> <div> <div> <div> <p> Lorem ipsum dolor sit amet, animal postulant complectitur duo ei. Eros iracundia contentiones id cum. Utinam soleat apeirian nam cu. Unum labore Principes no pro, dolor omnium quo eu, quod similique eu eum.</p> <p> Его ut alii populo putent, illud populo repudiare duo an. Wisi computionam te quo. Viris maluisset cu has, te dico utamur appareat pro, ex probo quidam interesset pri. Duo ad sensibus torquatos adolescens, сидите с минимальным трудом номинально. Cu dolorum ocurreret mei, nam novum zril expetenda ne. </p> </div> </div> </div> <! - jQuery (необходим для плагинов Bootstrap JavaScript) -> <! - Включить все скомпилированные плагины (см. Ниже) или включить отдельные файлы по мере необходимости -> </body> </html> </code> </pre><p> Посмотреть живую демонстрацию вышеперечисленного. </p> <p> Обратите внимание, что когда элемент центрируется таким образом, элемент помещается непосредственно в класс строки. </p> <p> <strong> Предыдущая: </strong> https: // www.w3resource.com/twitter-bootstrap/center-a-div.php <br/> <strong> Далее: </strong> Варианты с использованием Bootstrap Material Design </p> .<div class='yarpp-related yarpp-related-none'> <p>No related posts.</p> </div> </div> </div> <div class="post-sharrre group"> <div id="twitter" data-url="https://ylianova.ru/css/otczentrovat-blok-css-czentrirovanie-gorizontalnoe-i-vertikalnoe.html" data-text="Отцентровать блок css: Центрирование горизонтальное и вертикальное" data-title="Tweet"></div> <div id="facebook" data-url="https://ylianova.ru/css/otczentrovat-blok-css-czentrirovanie-gorizontalnoe-i-vertikalnoe.html" data-text="Отцентровать блок css: Центрирование горизонтальное и вертикальное" data-title="Like"></div> <div id="googleplus" data-url="https://ylianova.ru/css/otczentrovat-blok-css-czentrirovanie-gorizontalnoe-i-vertikalnoe.html" data-text="Отцентровать блок css: Центрирование горизонтальное и вертикальное" data-title="+1"></div> <div id="pinterest" data-url="https://ylianova.ru/css/otczentrovat-blok-css-czentrirovanie-gorizontalnoe-i-vertikalnoe.html" data-text="Отцентровать блок css: Центрирование горизонтальное и вертикальное" data-title="Pin It"></div> </div> </div> </article> <ul class="post-nav group"> <li class="next"><a href="https://ylianova.ru/raznoe-2/protokol-ws-websockets-polnoczennyj-asinhronnyj-veb-habr.html" rel="next"><i class="fa fa-chevron-right"></i><strong>Вперед</strong> <span>Протокол ws: WebSockets — полноценный асинхронный веб / Хабр</span></a></li> <li class="previous"><a href="https://ylianova.ru/html/czvetovaya-palitra-html-kody-czvetov-html-css-palitra.html" rel="prev"><i class="fa fa-chevron-left"></i><strong>Назад</strong> <span>Цветовая палитра html: Коды цветов html css палитра</span></a></li> </ul> <section id="comments" class="themeform"> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/css/otczentrovat-blok-css-czentrirovanie-gorizontalnoe-i-vertikalnoe.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://ylianova.ru/wp-comments-post.php" method="post" id="commentform" class="comment-form"><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> <span class="required-field-message">Обязательные поля помечены <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий <span class="required">*</span></label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required">

  Имя *

  Email *

  Сайт