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

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

Анонимный Спасибо. NMitra Пожалуйста! С праздниками! Анонимный это невероятно, это охуенный сайт, однозначно в закладки!!11одинодин NMitra Радостно слышать 🙂 Анонимный Спасибо помог! NMitra Рада стараться 🙂 Анонимный Спасибо, долго не мог решить проблему выравнивания тега div по центру, а здесь я нашел все ответы) Вячеслав div по центру. к примеру есть div — center

HTML:
div />Ваша информация
/div

Задаем вопросы на нашем форуме: forum.uss.name NMitra И мы неправильно на них ответим. Какой ещё float:center; ?? Елена и Александр Никитины Здравствуйте!
Подскажите как вот здесь http://www.spo565.ru/2014/03/blog-post_9510.html выровнять каталог, чтобы он одинаково справа и слева вылазил за пределы ширины блога NMitra Здравствуйте, попробуйте так

iframe[src^=»http://ru.oriflame.com] position: relative;
left: -106px;
>

У вас сайт фиксированный, поэтому из ширины каталога нужно вычесть ширины блока с содержанием и поделить на два. Елена и Александр Никитины Наталья, вы меня конечно извините, а куда этот код вставить? NMitra Это стиль CSS. Добавлять так http://shpargalkablog.ru/2011/12/kak-izmenit-shablon-blogger.html Елена и Александр Никитины Наталья, и первый и второй вариант попробовал, никаких изменений не произошло. Вообще никаких, странно. Елена и Александр Никитины Оставил первый вариант: изменения в коде шаблона перед ]]>. http://www.spo565.ru/2014/03/blog-post_9510.html Елена и Александр Никитины Перед ]]> NMitra Кавычки забыла:

iframe[src^=»http://ru.oriflame.com»] < Елена и Александр Никитины Наталья, вы-ЭКОНОМИСТ. нашего времени и нервов! Спасибо Вам огромное!
. теперь пытаюсь Хлебные крошки победить, вроде ваш материал изучил, но с чего начать и как их запустить. NMitra С чего нибудь)) Наверно уже не смогу более подробно объяснить. Анонимный Спасибо! Анонимный Тема поста: Как выровнять div по центру в HTML
А содержание: выравнивание текста внутри div NMitra Вы не правы, div выравнивается по горизонтали. Ему можно задать разные значения свойства display. И поэтому выравнивание зависит в том числе от родителя. Думаю, вам будет интересна эта статья http://shpargalkablog.ru/2012/03/vyrovnyat-tekst-vertikali.html

Названием я лишь пытаюсь предугадать как будут искать посетители. Чаще они задают не вопрос «Выравнять блок по горизонтали», а «Как выровнять блок по центру». Анонимный Интересно, работает, но не понятен сам механизм: каким образом свойство ‘margin: 0 auto’ выравнивает блок по ценру? Сможете объяснить? NMitra Посмотрите тут http://shpargalkablog.ru/2011/03/svoistva-margin-padding.html#m-auto
Если не вразумительно объяснила, обязательно скажите, попробую ещё раз Анонимный Посмотрите тут: http://ledcl.ru/info/programs_instr.html Как в самом низу стрелку выровнять по правому краю? NMitra .button_up a float: right;
> Анонимный Спасибо! Alex Огромное СПАСИБИЩЕ. NMitra Благодарю за комментарии! Побольше бы таких! Леонид Гаврилов Сиэсэс — это сила! NMitra Угу 🙂 Андрей Лукницкий Спасибо большое всё получилось.
Анонимный Здравствуйте!
Такой вопросик.

//div style=»width:77%; height:555px; margin:0 auto; border:3px solid red;»\\
//div style=»width:100%; height:55px; background-color:green;» \\

//select style=»width:177px; float:left; «\\
//option\\lev//option\\
//select\\
//select style=»width:177px; float:right; «\\
//option\\prav//option\\
//select\\
//select style=»width:177px; display:block; margin:0 auto; overflow: auto; «\\
//option\\seredina//option\\
//select\\

Всё красиво и хорошо. Но мне надо что-бы при уменьшении экрана. Эти селекторы становились в столбик. Ну ни как не получается. Если можете, подскажите как. Буду очень благодарен.

NMitra Здравствуйте! Проще всего использовать @Media http://shpargalkablog.ru/2010/12/shirina-saita-css.html Анонимный Спасибо Вам.
Я в принципе этим всегда и пользуюсь. Но опять проблема с ИЕ. Там приходится ЯваСкриптом отслеживать. Думал вы сможете подсказать, как это можно реализовать просто, правильно задав стили. Ведь это у Вас получается ну очень хорошо. Ладно, спасибо Вам. Порою ещё.
NMitra Остальное точно в старых IE не будет работать 🙂 Анонимный Благодарю Вас.
Я тут как бы один способ полу нарыл додумал. Как это можно было сделать с таблицей и немного ЯваСкрипт. Но одна проблемка. Ещё подумаю, порою. Если не получится. Можно Вам сюда ещё напишу, может у Вас будет какая мысль?
Пошёл дорывать, думать.
NMitra Конечно. Только одна просьба: сбрасывайте примеры на https://jsfiddle.net/ Всё равно я потом там смотрю результат Анонимный Значит так. В первом варианте работает только. Когда экран фактически имеет такой размер. Потому как, при загрузке страницы считывается размер и через document.wrire(); выводится результат если попало на ИФ.

Вот если есть какой-то способ вместо document.wrire(); как-то иначе отображать. Тогда всё было бы хорошо.

Поэтому думал и нашёл вроде что-то. Уже казалось СУПЕР. Но проблема что нам надо не открывающий tr и закрывающий tr. А наоборот. закрывающий tr и потом открывающий tr.
Значит не то.
https://jsfiddle.net/znko0w45/

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

До свидания.
Анонимный Извините, ещё дополню.
Во втором способе.
Оказывается и простая вставка tr /tr если написана перед загрузкой превращает их в столбик. Но после загрузки. Новый элемент появляется но остальные никак не реагируют.

Как выровнять по центру блок в CSS?

Пусть у нас есть элемент div, внутри которого есть другой div:

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

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

1. Выравнивание по горизонтали при помощи фиксированных отступов

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

(ширина_внешнего_блока — ширина_внутреннего_блока) / 2

И указать в стилях конкретные значения:

.box < width: 1000px; >.box-content < width: 500px; margin-left: 250px; /* отступ справа вычисляется сам */ >

То же самое возможно использовать и с процентами, ширина внешнего блока при этом принимается за 100%: например, ширина внутреннего блока 60%, значит размер отступов будет равен 20%:

.box-content

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

.box-content

2. Горизонтальное выравнивание при помощи произвольных отступов

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

.box-content

Если вложенный элемент .box-content является строчным (img, a, span и др.), то для него понадобится указать display:

.box-content

3. Использование text-align у внешнего блока

text-align также позволяет выполнить выравнивание по горизонтали, в первую очередь он используется для текста.

Например, в данном случае:

 
Какой-то текст
 

Выравнивания по центру можно достичь, указав text-align для .text-box :

.text-box

4. Горизонтальное выравнивание блока при помощи абсолютного позиционирования

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

.box < position: relative; >.box-content

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

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

Если есть блок, в котором размещен текст, занимающий не больше 1 строки (например, кнопка или пункт меню) и известна высота этого блока, то можно задать line-height , равный этой высоте.

Например, для такой структуры:

Пункт меню

Выравнивание по вертикали будет выглядеть следующим образом:

.menu-item

2. Вертикальное выравнивание блока при помощи абсолютного позиционирования

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

.box < position: relative; >.box-content

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

.box < position: relative; >.box-content

3. Табличное выравнивание по вертикали

Как известно, в таблицах работает vertical-align для выравнивания их контента по высоте.

 
Какие-то данные
 

Если использовать display: table в стилях, то возможно добиться того же:

.table < display: table; width: 100%; >.table-row

4. Вертикальное выравнивание при помощи CSS3-трансформации

CSS3 позволяет выполнять выравнивание буз необходимости добавления внешних блоков. Достаточно иметь один блок:

Какие-то данные

Стили для него будут выглядеть следующим образом, если у него известны высота и ширина:

Если же размеры блока неизвестны, то внешний блок становится нужен:

 
Какие-то данные
 
 

И стили определяются так:

.box-content

Поделиться статьей «Как выровнять по центру блок в CSS?»

Все про CSS выравнивание

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

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

Проще всего с помощью CSS выровнять блоки, у которых заранее известна высота (для выравнивания по вертикали) или ширина (для горизонтального выравнивания).

Выравнивание при помощи padding

Иногда можно не центрировать элемент, а добавить ему границы свойством «padding«.

Например, есть картинка 200 на 200 пикселей, и требуется центрировать ее в блоке 240 на 300. Можем задать высоту и ширину внешнему блоку = 200px, и добавить по 20 пикселей сверху и снизу, и по 50 слева и справа.

.example-wrapper1< background: #535E73; width: 200px; height: 200px; padding: 20px 50px; >

Выравнивание абсолютно позиционированных блоков

Если для блока задано «position: absolute«, тогда его можно позиционировать относительно ближайшего родителя с «position: relative». Для этого нужно всем свойствам («top«,»right«,»bottom«,»left«) внутреннего блока присвоить одинаковое значение, а также «margin: auto».

*Есть нюанс: Ширина (высота) внутреннего блока + значение left (right, bottom, top) не должны превышать размеры родительского блока. Надежнее свойствам left (right, bottom, top) присваивать 0 (ноль).

.example-wrapper2< position: relative; height: 250px; background: url(space.jpg); > .cat-king< width: 200px; height: 200px; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; background: url(king.png); >

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

Выравнивание посредством «text-align: center»

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

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

.example-text< text-align: center; padding: 10px; background: #FF90B8; >

Стоит заметить, что это свойство будет работать не только для текста, но и для любых строчных элементов («display: inline»).

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

.example-wrapper3< text-align: center; background: #FF90B8; > .inline-text< display: inline-block; width: 40%; padding: 10px; text-align: left; background: #FFE5E5; >

Выравнивание блоков при помощи margin

Блочные элементы с известной шириной легко выравниваются по горизонтали, если установить им «margin-left: auto; margin-right: auto». Обычно используется сокращенная запись: «margin: 0 auto» (вместо ноля может быть любое значение). Но вот для выравнивания по вертикали такой способ не подойдет.

.lama-wrapper< height: 200px; background: #F1BF88; > .lama1< height: 200px; width: 200px; background: url(lama.jpg); margin: 0 auto; >

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

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

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

Выравнивание свойством line-height

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

Это фиолетовая строчка, высота которой равна высоте блока.

.example-wrapper4< line-height: 100px; color: #DC09C0; background: #E5DAE1; height: 100px; text-align: center; >

Так же возможно добиться выравнивания блока с несколькими строками. Для этого придется использовать дополнительный блок-обертку, и устанавливать высоту строки ему. Внутренний блок может быть многострочным, но обязательно «inline». К нему нужно применить «vertical-align: middle».

А это inline-элемент. Здесь несколько оранжевых
строчек. Они выравниваятся
за счет установленной высоты строки блока-родителя.

.example-wrapper5 < line-height: 160px; height: 160px; font-size: 0; background: #FF9B00; > .example-wrapper5 .text1< display: inline-block; font-size: 14px; line-height: 1.5; vertical-align: middle; background: #FFFAF2; color: #FF9B00; text-align: center; >

У блока обертки должно быть установлено «font-size: 0». Если не установить нулевой размер шрифта, то браузер добавит от себя несколько лишних пикселей. Также придется указать размер шрифта и высоту строки для внутреннего блока, ведь эти свойства наследуются от родителя.

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

Свойство «vertical-align» также действует на ячейки таблицы. C установленным значением «middle», контент внутри ячейки выравнивается по центру. Конечно, табличная верстка в наше время считается архаической, но в исключительных случаях можно симулировать ее, указав «display: table-cell«.

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

​Как центрировать в CSS через Flexbox, Grid, Position и Margin

Рассказываем, как выровнять по центру в CSS блоки и их содержимое при помощи свойство Flexbox, Grid, Position и Margin.

Сегодня мы покажем, как можно центрировать и выравнивать содержимое с помощью CSS. Ещё мы рассмотрим разные техники выравнивания.

Это — перевод оригинальной статьи на freeCodeCamp от автора Joy Shaheb.

Ещё у нас есть видеоверсия урока от автора (осторожно, английский язык):

Что такое главная и поперечная оси в CSS

Прежде всего, давайте разберемся, что такое:

1. Главная ось.
2. Поперечная ось.

Линия, проходящая по экрану слева направо — это и есть главная ось. Вы также можете называть её осью Х или горизонтальной линией.

Линия, которая проходит сверху вниз — это поперечная ось. Также её можно назвать осью Y или вертикальной линией.

Настройка проекта

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

HTML

Запишите этот код внутри тега body:

CSS

Очистите стили браузера по умолчанию, чтобы мы получали точные результаты.

Выберите класс .container и установите его значение 100vh . В противном случае мы не сможем увидеть наш результат на вертикальной оси:

.container

Стилизуйте класс .box-1 следующим образом:

.box-1

Все готово, теперь начнем кодить!

Как использовать Flexbox для центрирования чего-либо

Мы можем использовать Flexbox для выравнивания div по осям X и Y.

Для этого нам нужно записать свойство display: flex; внутри класса .container :

.container

Мы поэкспериментируем с этими двумя свойствами:

• justify-content;
• align-items.

Как отцентрировать что-либо по горизонтали с помощью Flexbox

Мы используем свойство justify-content , используя следующие значения.

Напишите следующий код.

.container< display: flex; height: 100vh; /* Change values to experiment*/ justify-content: center; > 

Результат будет выглядеть следующим образом.

Как выровнять что-либо по вертикали с помощью Flexbox

Мы используем свойство align-items , используя следующие значения.

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

.container< height: 100vh; display: flex; /* Change values to experiment*/ align-items: center; > 

Результат выглядит так:

Как центрировать div по горизонтали и вертикали с помощью Flexbox

Мы объединим свойства justify-content и align-items , чтобы выровнять div как по горизонтали, так и по вертикали.

Напишите следующий код.

.container< height: 100vh; display: flex; /* Change values to experiment*/ align-items: center; justify-content: center; > 

Результат выглядит следующим образом.

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

Как использовать CSS Grid для центрирования чего-либо

Используем grid для выравнивания содержимого div по осям X и Y.

Для этого нужно записать свойство display: grid; внутри класса .container :

.container

Поэкспериментируем с этими двумя свойствами:

1. justify-content;
2. align-content.

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

1. justify-items;
2. align-items.

Как выровнять что-либо по горизонтали с помощью CSS Grid

Используем свойство justify-content .

Напишите такой код:

.container< height: 100vh; display: grid; /* Change values to experiment*/ justify-content: center; > 

Как выровнять что-либо по вертикали с помощью CSS Grid

Мы используем свойство align-content , используя следующие значения.

Напишите этот код:

.container< height: 100vh; display: grid; /* Change values to experiment*/ align-content: center; > 

Вот, каким будет результат:

Как выровнять div по горизонтали и вертикали с помощью CSS Grid

Объединим свойства justify-content и align-content , чтобы выровнять div как по горизонтали, так и по вертикали.

Напишите следующий код:

.container< height: 100vh; display: grid; /* Change values to experiment*/ align-content: center; justify-content: center; > 

Результат, который должен получиться:

Альтернативный способ

Вы можете использовать свойства justify-items и align-items и получить те же результаты:

.container< height: 100vh; display: grid; /* Change values to experiment*/ align-items: center; justify-items: center; > 

Свойство place-content в CSS Grid

Это сокращение двух свойств CSS Grid:

1. justify-content;
2. align-content.

.container

Получаем тот же результат:

Как использовать свойство CSS Position для центрирования чего-либо

Это комбинация этих свойств:

1. position;
2. top, left;
3. transform, translate.

Напишите следующий код:

.container

Вместе с этим кодом в CSS:

.box-1

Что такое центральная точка div

По умолчанию это — центральная точка div.

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

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

Написав эту строку:

transform: translate(-50%,-50%); 

Мы решим проблему и получим следующий результат.

Что такое свойство Translate в CSS

Translate – это сокращение 3 свойств:

1. translateX;
2. translateY;
3. translateZ.

Как выровнять div по горизонтали с помощью свойства CSS Position

Используем свойство left внутри класса .box-1 .

.box-1< /* other codes are here*/ left: 50%; transform: translate(-50%); > 

Как выровнять div по вертикали с помощью свойства CSS Position

Используем свойство top внутри класса .box-1 .

.box-1< /* Other codes are here*/ top: 50%; transform: translate(0,-50%); > 

Как центрировать div по горизонтали и вертикали с помощью свойства CSS position

Чтобы достичь этого результата, мы объединим вместе свойства:

1. top, left;
2. transform, translate.

.box-1< /*Other codes are here */ top: 50%; left: 50%; transform: translate(-50%,-50%); > 

Как использовать свойство margin для центрирования чего-либо

Свойство margin является сокращением 4 свойств:

1. margin-top, margin-bottom;
2. margin-left, margin-right.

Напишите этот код:

.container < height: 100vh; display: flex; >.box-1

Как выровнять div по горизонтали с помощью свойства CSS margin

Используем свойство margin внутри класса .box-1 . Напишите этот код:

.box-1< //Other codes are here margin: 0px auto; > 

Вот, как будет выглядеть результат:

Как выровнять div по вертикали с помощью свойства CSS margin

Снова используем margin внутри класса .box-1 . Напишите следующий код:

.box-1< //Other codes are here margin: auto 0px; > 

Как выровнять div по горизонтали и вертикали с помощью свойства CSS margin

И ещё разок используем margin внутри класса .box-1 . Напишите такой код:

.box-1< //Other codes are here margin: auto auto; > 

Результат будет выглядеть так:

Заключение

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

Возьмите вашу медаль за то, что дочитали статью до конца!