Как выровнять по середине в css

Позиционирование

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

Нам бы хотелось чтобы вы следовали за нами с упражнениями на вашем локальном ПК, если возможно возьмите копию 0_basic-flow.html из нашего GitHub репозитория (исходный код здесь) и используйте его как отправную точку.

Введение в позиционирование

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

Существует несколько разных типов позиционирования, которые вы можете применить к элементам HTML. Для активации специфического типа позиционирования у элемента, мы используем свойство position .

Статическое позиционирование

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

Чтобы продемонстрировать это и настроить ваш образец для будущих разделов, сначала добавьте class positioned ко второму в HTML:

p class="positioned">. p> 

А теперь добавьте следующее правило в конец вашего CSS:

.positioned  position: static; background: yellow; > 

И если вы сейчас сохраните и обновите, то вы не увидите никаких изменений, не считая обновлённого цвета фона 2-го параграфа. Это нормально, как мы и говорили ранее, статическое позиционирование является поведением по умолчанию!

Примечание: вы можете посмотреть живой пример на данном этапе на 1_static-positioning.html (см. исходный код).

Относительное позиционирование

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

position: relative; 

Если вы сохраните и обновите на данном этапе, в результате вы совсем не увидите изменений. Так как же вам модифицировать положение? Вам необходимо использовать свойства top , bottom , left (en-US), и right которые мы объясним в следующем разделе.

Введение в top, bottom, left, и right

top , bottom , left (en-US), и right используются вместе с position чтобы указать куда именно перемещать позиционируемый элемент. Для того чтобы попробовать, добавьте следующее объявление к правилу .positioned в вашем CSS:

top: 30px; left: 30px; 

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

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

h1>Relative positioningh1> p> I am a basic block level element. My adjacent block level elements sit on new lines below me. p> p class="positioned"> By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height. p> p> We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both. p> p> inline elements span>like this onespan> and span>this onespan> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements span>wrap onto a new line if possible — like this one containing textspan>, or just go on to a new line if not, much like this image will do: img src="long.jpg" /> p> 

body  width: 500px; margin: 0 auto; > p  background: aqua; border: 3px solid blue; padding: 10px; margin: 10px; > span  background: red; border: 1px solid black; > .positioned  position: relative; background: yellow; top: 30px; left: 30px; > 

Круто, правда? Хорошо, вероятно это не то, чего вы ожидали — почему он переместился вниз и вправо, когда мы указали вверх и влево? Как бы нелогично это ни звучало это всего лишь способ того как работает позиционирование — вам надо думать о невидимой силе толкающей указанную сторону позиционируемого блока, перемещая его в противоположную сторону. Так, например, если вы указали top: 30px; , сила толкает блок, заставляя его перемещаться вниз на 30px.

Примечание: вы можете посмотреть пример на этом этапе на 2_relative-positioning.html (см. исходный код).

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

Абсолютное позиционирование даёт совершенно другие результаты. Давайте попробуем изменить объявление позиции в вашем коде как показано ниже:

position: absolute; 

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

h1>Absolute positioningh1> p> I am a basic block level element. My adjacent block level elements sit on new lines below me. p> p class="positioned"> By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height. p> p> We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both. p> p> inline elements span>like this onespan> and span>this onespan> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements span>wrap onto a new line if possible — like this one containing textspan>, or just go on to a new line if not, much like this image will do: img src="long.jpg" /> p> 

body  width: 500px; margin: 0 auto; > p  background: aqua; border: 3px solid blue; padding: 10px; margin: 10px; > span  background: red; border: 1px solid black; > .positioned  position: absolute; background: yellow; top: 30px; left: 30px; > 

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

Во-вторых, обратите внимание, что позиция элемента изменилась — это потому, что top , bottom , left (en-US), и right ведут себя по-другому с абсолютным позиционированием. Вместо того, чтобы позиционировать элемент на основе его относительного положения в обычном потоке макета документа, они определяют расстояние, на котором элемент должен находиться от каждой из сторон содержащего элемента. Поэтому в этом случае мы говорим, что абсолютно позиционированный элемент должен располагаться в 30px от верха «содержащего элемента» и 30px от левого края (В этом случае «содержащий элемент» является исходным содержащим блоком. См. раздел ниже для дополнительной информации).

Примечание: вы можете использовать top , bottom , left (en-US), и right для изменения размера элемента если вам надо. Попробуйте установить top: 0; bottom: 0; left: 0; right: 0; и margin: 0; для вашего позиционируемого элемента и посмотрите, что произойдёт! Потом снова все верните.

Примечание: Да, margin-ы все ещё влияют на позиционируемый элемент. Однако, схлопывания margin не происходит.

Примечание: вы можете посмотреть пример на этом этапе на 3_absolute-positioning.html (см. исходный код).

Контекст позиционирования

Какой элемент является «содержащим» относительно абсолютно позиционируемого элемента? Это очень сильно зависит от свойства позиции предка позиционируемого элемента (см. Определение содержащего блока).

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

position: relative; 

Это должно дать следующий результат:

h1>Positioning contexth1> p> I am a basic block level element. My adjacent block level elements sit on new lines below me. p> p class="positioned"> Now I'm absolutely positioned relative to the code><body>code> element, not the code><html>code> element! p> p> We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both. p> p> inline elements span>like this onespan> and span>this onespan> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements span>wrap onto a new line if possible — like this one containing textspan>, or just go on to a new line if not, much like this image will do: img src="long.jpg" /> p> 

body  width: 500px; margin: 0 auto; position: relative; > p  background: aqua; border: 3px solid blue; padding: 10px; margin: 10px; > span  background: red; border: 1px solid black; > .positioned  position: absolute; background: yellow; top: 30px; left: 30px; > 

Позиционируемый элемент теперь располагается относительно элемента .

Примечание: вы можете посмотреть живой пример на этом этапе на 4_positioning-context.html (см. исходный код).

Введение в z-index

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

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

p:nth-of-type(1)  position: absolute; background: lime; top: 10px; right: 30px; > 

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

Можете ли вы изменить порядок наложения? Да, можете, используя свойство z-index . «z-index» это ссылка к z-оси. Вы можете вспомнить из предыдущих этапов в этом курсе, где мы обсуждали использование горизонтальных (x-ось) и вертикальных (y-оси) координат веб-страницами для определения позиции для таких вещей, как фоновые изображения и смещение теней. (0,0) находится наверху слева страницы (или элемента) и оси x- и y- направляются направо и вниз страницы (во всяком случае, для языков, направленных слева на право).

У веб-страниц также имеется z-ось: воображаемая линия, которая направляется от поверхности вашего экрана к вашему лицу (или что ещё вам нравится иметь перед экраном). Значения z-index влияют на то где позиционируемый элемент располагается на этой оси; положительные значения перемещают их выше по наложению, а отрицательные значения перемещают их ниже по наложению. По умолчанию все позиционируемые элементы имеют z-index auto , что фактически равно 0.

Для того чтобы изменить порядок наложения, попробуйте объявить для вашего p:nth-of-type(1) правила:

z-index: 1; 

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

h1>z-indexh1> p> I am a basic block level element. My adjacent block level elements sit on new lines below me. p> p class="positioned"> Now I'm absolutely positioned relative to the code><body>code> element, not the code><html>code> element! p> p> We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both. p> p> inline elements span>like this onespan> and span>this onespan> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements span>wrap onto a new line if possible — like this one containing textspan>, or just go on to a new line if not, much like this image will do: img src="long.jpg" /> p> 

body  width: 500px; margin: 0 auto; position: relative; > p  background: aqua; border: 3px solid blue; padding: 10px; margin: 10px; > span  background: red; border: 1px solid black; > .positioned  position: absolute; background: yellow; top: 30px; left: 30px; > p:nth-of-type(1)  position: absolute; background: lime; top: 10px; right: 30px; z-index: 1; > 

Обратите внимание что z-index принимает значения индекса только без единиц измерения; вы не можете задавать значения, что хотите, чтобы какой-то элемент был на 23 пикселя выше по z-оси — это так не работает. Более высокие значения будут располагаться над меньшими значениями и от вас зависит какие значения вы используете. Используя 2 и 3, вы получите тот же эффект что и 300 и 40000.

Примечание: вы можете посмотреть живой пример на этом этапе на 5_z-index.html (см. исходный код).

Фиксированное позиционированиее

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

Давайте составим простой пример, чтобы показать, что мы имеем в виду. Во-первых, удалите существующие правила p:nth-of-type(1) и .positioned из вашего CSS.

А теперь, обновите правило body удалив объявление position: relative; и добавьте фиксированную высоту как тут:

body  width: 500px; height: 1400px; margin: 0 auto; > 

Теперь мы собираемся дать элементу (en-US) position: fixed; , а также заставить его располагаться на верху окна просмотра. Добавьте следующее правило в ваш CSS:

h1  position: fixed; top: 0; width: 500px; margin-top: 0; background: white; padding: 10px; > 

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

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

p:nth-of-type(1)  margin-top: 60px; > 

Теперь вы должны видеть законченный пример:

h1>Fixed positioningh1> p> I am a basic block level element. My adjacent block level elements sit on new lines below me. p> p class="positioned">I'm not positioned any more. p> p> We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both. p> p> inline elements span>like this onespan> and span>this onespan> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements span>wrap onto a new line if possible — like this one containing textspan>, or just go on to a new line if not, much like this image will do: img src="long.jpg" /> p> 

body  width: 500px; height: 1400px; margin: 0 auto; > p  background: aqua; border: 3px solid blue; padding: 10px; margin: 10px; > span  background: red; border: 1px solid black; > h1  position: fixed; top: 0px; width: 500px; background: white; padding: 10px; > p:nth-of-type(1)  margin-top: 60px; > 

Примечание: вы можете посмотреть живой пример на этом этапе на 6_fixed-positioning.html (см. исходный код).

position: sticky

Доступно другое значение позиции называемое position: sticky , которое несколько новее чем другие. По сути, это гибрид относительной и фиксированной позиции, который позволяет позиционируемому элементу вести себя как будто он относительно позиционирован, до тех пор пока он не будет прокручен до определённой пороговой точки (например, 10px от вершины окна просмотра), после чего он становится фиксированным. Это можно использовать, например, чтобы заставить панель навигации прокручиваться вместе со страницей до определённой точки, а затем задерживать в верхней части страницы.

h1>Sticky positioningh1> p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien. p> div class="positioned">Stickydiv> p> Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. p> p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien. p> 

body  width: 500px; margin: 0 auto; > .positioned  background: rgba(255, 84, 104, 0.3); border: 2px solid rgb(255, 84, 104); padding: 10px; margin: 10px; border-radius: 5px; > 

.positioned  position: sticky; top: 30px; left: 30px; > 

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

h1>Sticky positioningh1> dl> dt>Adt> dd>Appledd> dd>Antdd> dd>Altimeterdd> dd>Airplanedd> dt>Bdt> dd>Birddd> dd>Buzzarddd> dd>Beedd> dd>Bananadd> dd>Beanstalkdd> dt>Cdt> dd>Calculatordd> dd>Canedd> dd>Cameradd> dd>Cameldd> dt>Ddt> dd>Duckdd> dd>Dimedd> dd>Dipstickdd> dd>Dronedd> dt>Edt> dd>Eggdd> dd>Elephantdd> dd>Egretdd> dl> 

CSS может выглядеть как показано ниже. В нормальном потоке элементы будут прокручиваться вместе с контентом. Когда мы добавляем position: sticky к элементу , вместе со значением top 0, поддерживающие браузеры будут приклеивать заголовки к вершине окна просмотра когда они будут достигать той позиции. каждый последующий заголовок будет затем заменять предыдущий при его прокрутке вверх к той позиции.

dt  background-color: black; color: white; padding: 10px; position: sticky; top: 0; left: 0; margin: 1em 0; > 

body  width: 500px; height: 1400px; margin: 0 auto; > dt  background-color: black; color: white; padding: 10px; position: sticky; top: 0; left: 0; margin: 1em 0; > 

h1>Sticky positioningh1> dl> dt>Adt> dd>Appledd> dd>Antdd> dd>Altimeterdd> dd>Airplanedd> dt>Bdt> dd>Birddd> dd>Buzzarddd> dd>Beedd> dd>Bananadd> dd>Beanstalkdd> dt>Cdt> dd>Calculatordd> dd>Canedd> dd>Cameradd> dd>Cameldd> dt>Ddt> dd>Duckdd> dd>Dimedd> dd>Dipstickdd> dd>Dronedd> dt>Edt> dd>Eggdd> dd>Elephantdd> dd>Egretdd> dl> 

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

Примечание: вы можете посмотреть живой пример на этом этапе на 7_sticky-positioning.html (см. исходный код).

Проверь свои навыки!

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

Заключение

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

Смотрите также

• Справка свойства position .
• Примеры практического позиционирования, для дополнительных полезных идей

В этом модуле

• Введение в CSS макет
• Нормальный поток
• Flexbox
• Grid
• Floats
• Позиционирование
• Макет с несколькими столбцами
• Отзывчивый дизайн
• Руководство по медиавыражениям для новичков (en-US)
• Устаревшие методы макетов (en-US)
• Поддержка старых браузеров (en-US)
• Базовая оценка понимания макета

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 3 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Как сделать блок по середине в css

Мы принимаем к оплате:

«Подарочный сертификат» от нашего Учебного Центра – это лучший подарок для тех, кто Вам дорог! Оплате обучение и подарите Вашим родным и близким обучение по любому из курсов.

«Сертификат на повторное обучение» дает возможность повторно пройти обучение в нашем Учебном Центре со скидкой 1000 рублей!

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

Мёртвый блог живого человека

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

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

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

Итак, что мы имеем?

Способ 1. Самый крутой

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

К примеру, для выравнивания сверху пишем:

Для выравнивания сверху и снизу:

margin:10px auto 5px;

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

Способ 2. Процентный

Если блок имеет ширину в процентах, то мы можем выровнять div по центру применяя равные отступы, чтобы добить полную ширину до 100%. Кто не понял, покажу на примере, так проще:

Имеем блок шириной 50%, чтобы выровнять его по центру, нам нужно боковые отступы сделать по 25% справа и слева соответственно. Смотрим код:

Не напрягаясь, получаем блок по центру, выровненный банальной математикой (50 + 25 + 25) ��

Способ 3. Смешанный

Данный способ посоветовал в комментариях sman.

Как я упоминал в начале статьи, способов выровнять блок по центру огромное множество. Каждый выбирCgает тот, который ему больше по душе. Жду комментариев и новых способов ��

Способ 4. Использование дополнительного блока

Способ предложил Виктор в комментариях:

Ни один метод не решает проблему с float внутри блока, если ширина блока заведомо не известна (например, меню).

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

Как сделать DIV по центру страницы?

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

Выровнять div по центру страницы

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

Мы создали свойства для блока DIV с классом centered, прописали фиксированную позицию, задали значения ширины и высоты, и отступили от верхнее и левой границы сайта по 50%, в результате мы почти получили желаемое:

div по центру страницы

Наш блок DIV выровнялся по середине страницы, но относительно своего левого верхнего угла, соответственно нам необходимо сдвинуть наш div на 50% вверх и влево относительно своей ширины и высоты. Сделаем мы это с помощью отрицательных значений свойства margin:

т.к. у нашего блока фиксированный размер width: 200px; height:100px;, то 50% от ширины и высоты мы легко посчитали и получили: margin: -50px 0 0 -100px;

Теперь результат нашей работы нас устраивает:

div по центру страницы Демо пример “DIV по центру страницы”

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

В случае если мы не знаем ширину и высоту нашего блока, то вместо margin, можно воспользоваться transform: translate(-50%, -50%);, свойство transform: translate(-50%, -50%); смещает наш блок относительно его размеров и тем самым решает нашу задачу ��

Демо пример №2. “DIV по центру страницы”

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

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

Все выравнивание блока DIV wrapper, осуществляется с помощью свойства margin:0 auto;, главное чтобы значение ширины было меньше чем у родительского блока ��

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

Демо пример выравнивания блока DIV по горизонтали, относительно краев окна браузера.

Демо пример “Выровнять div по горизонтали”

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

Как сделать выравнивание по центру ?

Приветствую вас, дорогие друзья!

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

Навигация по статье:

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

Выравнивание по центру с помощью margin по горизонтали

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

display:block; /*Делаем блочный элемент*/

margin:auto;/*Задаем автоматический внешний отступ*/

Вот, что получилось:

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

Он имеет некоторые особенности:

1. 1.Данное свойство работает только для блочных элементов. То есть для выравниваемого блока должен быть присвоен display:block; (обычно оно стоит у блока по умолчанию)
2. 2.Данное свойство так же не сработает для блока, у которого задано абсолютное позиционирование (position:absolute) или обтекание (float:left или float:right).

Выравнивание по центру с помощью text-align по горизонтали

Следующий способ выравнивания по центру заключается в использовании CSS-свойства text-align со значением center. Данное свойство предназначено для горизонтального выравнивания текста.

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

Данный вариант не сработает для блока с абсолютным позиционированием (position:absolute;) или если для блока задано обтекание (float:left или float:right).

text-align:center; /*Выравнивание по центру */

display:inline; /*Делаем строчный элемент*/

Вот, что у нас получилось:

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

Выравнивание по центру с помощью vertical-align по вертикали

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

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

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

Абсолютное выравнивание по центру

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

Для того, чтобы этого добиться, нам нужно присвоить блоку свойство margin со значением auto, и расположить его в блоке со CSS свойством display:table-cell;, как это было показано в предыдущем варианте.

display:table; /*делаем родительский блок таблицей*/

border:5px solid green;

display:table-cell; /*делаем блок ячейкой таблицы*/

vertical-align:middle; /*задаём выравнивание по вертикали*/

border:5px solid blue;

border:3px solid orange;

margin:auto; /*задаём выравнивание по горизонтали*/

Абсолютное выравнивание div по центру

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

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

Для этого нам нужно сделать блочным элементом и задать ему следующее выравнивание:

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

Во что получится:

Выравнивание div по центру с помощью margin

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

А на этом у меня сегодня все. До встречи в следующих статьях!

С уважением Юлия Гусарь

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

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

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

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

Это свойство наследуется и передается от родителя всем потомкам. Влияет не только на текст, но и на другие элементы. Для этого они должны быть строчными (например, span) или строчно-блочными (любые блоки, которым задано свойство display: block). Последний вариант позволяет также изменять ширину и высоту элемента, более гибко настраивать отступы.

Часто на страницах align приписывают к самому тегу. Это сразу делает код невалидным, так как W3C признал атрибут align устаревшим. Использование его на странице не рекомендуется.

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

Если нужно задать выравнивание div по центру, CSS может предложить довольно удобный способ: использование внешних отступов margin. Отступы можно задавать как блочным элементам, так и строчно-блочным. Значение свойсва должно принимать значения 0 (отступы по вертикали) и auto (автоматические отступы по горизонтали):

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

Выравнивание блока по левому или правому краю

Иногда выравнивание по центру CSS-способом не требуется, зато надо поставить два блока рядом: один с левого края, другой — с правого. Для этого существует свойство float, которое может принимать одно из трех значений: left, right или none. Допустим, у вас есть два блока, которые надо поставить рядом. Тогда код будет таким:

Если есть еще и третий блок, который должен располагаться под первыми двумя блоками (например, футер), то ему необходимо прописать свойство clear:

Дело в том, что блоки с классами left и right выпадают из общего потока, то есть все остальные элементы игнорируют само существование выравненных элементов. Свойство clear:both позволяет футеру или любому другому блоку видеть выпавшие из потока элементы и запрещает обтекание (float) как слева, так и справа. Поэтому в нашем примере футер сместится вниз.

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

Бывают случаи, когда недостаточно задать выравнивание по центру CSS-способами, необходимо еще изменить вертикальное положение дочернего блока. Любой строчный или строчно-блочный элемент может быть прижат к верхнему или нижнему краю, находиться посередине родительского элемента или находиться в произвольном месте. Чаще всего требуется выравнивание блока по центру, для этого используется атрибут vertical-align. Допустим, есть два блока, один вложен в другой. При этом внутренний блок — строчно-блочный элемент (display: inline-block). Необходимо выровнять блок child по вертикали:

• выравнивание по верхней границе — .child ;
• выравнивание по центру — .child ;
• выравнивание по нижней границе — .child ;

На блочные элементы ни text-align, ни vertical-align не действуют.

Возможные проблемы с выровненными блоками

Иногда выравнивание div по центру CSS-способом может вызвать небольшие проблемы. Например, при использовании float: допустим, есть три блока: .first, .second и .third. Второй и третий блоки лежат в первом. Элемент с классом second выровнен по левому краю, а последний блок — по правому. После выравнивания оба выпали из потока. Если у родительского элемента не задана высота (например, 30em), то он перестанет растягиваться по высоте дочерних блоков. Чтобы избежать этой ошибки, используют «распорку» — специальный блок, который видит .second и .third. CSS-код:

Часто используются псевдокласс :after, который тоже позволяет вернуть блоки на место с помощью создания псевдораспорки (в примере в div с классом container лежит внутри .first и содержит .left и .right):

• .left
• .right
• .container:after

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

Другая проблема, с которой часто сталкиваются верстальщики, — выравнивание строчно-блочных элементов. После каждого из них автоматически добавляется пробел. Справиться с этим помогает свойство margin, которому задается отрицательный отступ. Есть и другие способы, которые используются значительно реже: например, обнуление размера шрифта. В этом случае в свойствах родительского элемента прописывается font-size:0. Если внутри блоков располагается текст, то в свойствах строчно-блочных элементов уже возвращается нужный размер шрифта. Например, font-size:1em. Способ удобен не всегда, поэтому гораздо чаще используется вариант со внешними отступами.

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

Расположение по центру в теге div

Доброго времени суток.
Как установить все элементы в центр по вертикали и горизонтали, внутри тега div.

Пытался сделать так(в css):

Расположение блоков div по центру
Как разместить все блоки div по центру? Игрался с float и position, но ничего не получилось. Не.

Расположение икноки и текста в теге h2 рядом друг с другом
Столкнулся с такой задачей, есть иконка и рядом текст в теге h2, но все это дело находится в.

Как в теге li с высотой в 35px сделать ссылку с текстом по центру?
Как в теге li с высотой в 35px сделать ссылку с текстом по вертикали слева по середине или же.

Как наложить один DIV на другой DIV (чтобы он был по центру)
Попытаюсь сформулировать свой вопрос (сразу говорю в начале посмотрите на скриншот который внизу).

Если нельзя напрямую, попробуем наискось.

Сообщение от Vanstorm
Сообщение от Vanstorm

У меня работает на Google Chrome Mozilla, а на IE нет.

Добавлено через 2 минуты

Сообщение от BlackApricot

Если нельзя напрямую, попробуем наискось.

Сообщение от romchiksoad
Сообщение от VtaMC

Зато кроссбраузерно!
Сделай сам, сделай лучше нас.

Сообщение от romchiksoad

Работает везде, но не очень нравится. Ну ладно, просто я думал, что это можно как-то одним параметром осуществить, а так то на то и выходит — что таблицу использовать, что скрипты писать. Всем спасибо.

Добавлено через 1 минуту
Просто думал выйграть в плане производительности!

Добавлено через 2 минуты

Сообщение от BlackApricot

Другие значения:
baseline
sub
super
top-text
top
middle
bottom
bottom-text
процент %

нет,не всё)такое наверно уже было?

Сообщение от romchiksoad
Сообщение от Vanstorm

Это не работает вообще, совсем.
line-height: вот это высота строки, то есть если дать текст, а не слово, то получаем полный бред. Расстояние между строк 319рх, ну и сколько таких строк уместится по высоте.

display: table-cell; этого нет вообще в моих книгах, выложи, что есть.

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

Выровнять по центру, по горизонтали div, внутри другого div
Есть див, в нём три других дива. Как выровнять их по середине? В этих блоках был использован.

Тег в теге

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

Scroll в теге DIV не работает
Приветствую всех! Прошу всех прочитавших мне помочь. Постараюсь вкратце обьяснить: Нашел на неком.

Div верстка. Как ее использовать, различные варианты исполнения

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

Div — верстка, это что такое?

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

.parent < text-align: center;/*все строчные элементы будут выравниваться по центру*/ >ul < display: inline-block; /*превращаем элемент в строчный блок*/ //display: inline; /*для IE6-7 превращаем элемент в строчный*/ zoom: 1; /*присваиваем ему layout*/ font-size: 12px;/*устанавливаем размер шрифта*/ >li < float: left;/*делаем блок плавающим*/ display: inline;/*убираем двойные отступы у плавающих блоков в IE6*/ margin-right: 4px; width: 23px; height: 22px; overflow: hidden; text-align: center;/*для того, чтобы центрировать надписи в элементах списка по горизонтали*/ color: #fff; font-weight: bold; background: url(/path-to/nvigatsiya-def.gif) no-repeat; cursor: default;/*для активной страницы*/ line-height: 22px;/*для того, чтобы центрировать надписи в элементах списка по вертикали*/ >li a < color: #fff; text-decoration: none; display: block; width: 23px; height: 22px; background: url(/path-to/nvigatsiya-href.gif) no-repeat; >