Выравнивание слоя по центру
Основное отличие веб-страницы от листа бумаги заключается в их размерах. Если лист имеет заданную фиксированную ширину и высоту, то по отношению к веб-сайту такого сказать нельзя. Веб-документ отображается в окне браузера и может изменять свои размеры в зависимости от настроек операционной системы, типа монитора, установленного разрешения и т.д. Использование выравнивания позволяет проигнорировать указанную особенность и располагать элемент у края окна или по его центру.
Когда речь идет об использовании слоев, то для выравнивания в нашем распоряжении имеется несколько способов — с помощью отступов, через позиционирование, а также используя атрибут align тега .
Использование отступов
Если добавить отступ к слою слева с помощью свойства margin-left , то визуально слой сместится на указанное значение вправо. Зная ширину слоя, его можно сместить так, чтобы слой располагался по центру веб-страницы. Для чего от 100%, составляющих общую доступную ширину, надо отнять ширину слоя в процентах и полученное значение разделить пополам. Результат и будет значением свойства margin-left (пример 1).
Пример 1. Использование margin-left
Выравнивание
Как вариант, можно не указывать ширину, а регулировать ее с помощью отступа слева и справа (пример 2).
Пример 2. Использование отступов
Выравнивание Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
В данном примере показано размещение слоя шириной 40% по центру. Хотя сама ширина никак напрямую не задается, она определяется значением свойств margin-left и margin-right . Они устанавливают отступ слева и справа, чтобы слой располагался по середине, их значения должны быть равны.
Следующий способ более универсален и уже не зависит от того, какие единицы измерения используются для установки ширины. Для этого требуется задать отступ слева и справа для слоя равным auto через стилевые свойства margin-left и margin-right или универсальное свойство margin (пример 3).
Пример 3. Применение значения auto
Выравнивание
В данном примере ширина слоя устанавливается 400 пикселов и выравнивается по центру с помощью значения 0 auto свойства margin . Первый аргумент устанавливает нулевой отступ одновременно сверху и снизу от слоя, а второй аргумент выравнивает слой по центру горизонтали окна браузера.
Атрибут align тега
Еще один способ размещения по центру вообще не требует использования никаких стилей и связан с атрибутом align тега . Указывая значение center , заставляем содержимое слоя выравниваться по его центру. Поэтому необходимо создать два слоя, один из которых будет служить контейнером для другого, как показано в примере 4.
Пример 4. Атрибут align
Выравнивание
Опять же, как и в случае использования свойства text-align , размещаться по центру будет и текст внутри слоя. Поэтому следует насильно задать ему необходимое выравнивание через стили. Ширину слоя-контейнера задавать не требуется, она будет вычисляться автоматически и занимать все доступное пространство веб-страницы.
Абсолютное позиционирование слоя
При абсолютном позиционировании координаты слоя вычисляются относительно левого верхнего угла окна родительского элемента или браузера, если родителя нет. Слой, заданный с абсолютным позиционированием, может располагаться под основным текстом или, наоборот, поверх него. Положение определяется с помощью стилевого свойства z-index и позволяет гибко управлять положением слоя по условной z-оси. Таким способом удобно выводить на веб-странице различные подсказки, всплывающие окна, рекламу или плавающие меню.
Вначале следует указать ширину и высоту слоя с помощью width и height . Размеры можно задавать в пикселах, процентах или других единицах. Ширину, например, можно определить в процентах, а высоту в пикселах. Из-за этой особенности предлагаемый метод размещения по центру является наиболее универсальным.
Следующий шаг — задаем абсолютное позиционирование слоя через position: absolute . Положение слоя следует определить как 50% по горизонтали и вертикали с помощью свойств left и top . Эти значения остаются неизменными, независимо от используемых единиц измерения.
Так как координаты слоя определяются от его левого верхнего угла, для точного выравнивания следует добавить свойства margin-left и margin-top с отрицательными значениями. Их величина должна быть равна половине ширины слоя (для margin-left ) и высоты (для margin-top ).
Чтобы высота слоя не менялась из-за его контента, включен overflow: auto , он добавляет полосы прокрутки, если в них возникнет нужда, высота при этом остается неизменной (пример 5).
Пример 5. Ширина слоя в пикселах
Выравнивание
В случае использования процентной записи стиль меняется незначительно, надо так же поделить ширину и высоту пополам и добавить полученные значения в качестве аргументов к свойствам margin-left и margin-top (пример 6). При этом надо учитывать, что видимая ширина элемента складывается из значений width , padding и border .
Пример 6. Ширина слоя в процентах
Выравнивание
Ширина и высота слоя напрямую связана с отступами слева и сверху, если требуется установить значение одного из параметров в процентах, соответственно, поменяется и запись другого параметра. Как показано в данном примере, ширина слоя установлена в 40%, следовательно, и для свойства margin-left также надо применить проценты, в данном случае, 20%.
Указанная особенность позволяет применять любые единицы измерения, а не ограничиваться только одной формой записи, что делает код подходящим практически для всех случаев.
Как выровнять 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: полное руководство
Центрирование элементов — самая популярная причина для жалоб на CSS. «Ну почему нельзя было сделать всё попроще?» — возмущаются все кому не лень. Думаю, проблема не в том, что это сложно сделать, а в том, что способов центрирования элементов такое множество, что бывает трудно выбрать подходящий.
Давайте построим древовидную схему для принятия решения и будем надеяться, что это всё немного упростит.
Мне нужно отцентрировать элемент…
По горизонтали
Является ли элемент строчным или строчно-* (как текст или ссылки)?
Строчные элементы внутри родительского блочного можно центрировать так:
.center-children < text-align: center; >
Это сработает для элементов с типом отображения inline , inline-block , inline-table , inline-flex и т.д.
Является ли элемент блочным?
Блочный элемент можно центрировать, указав для margin-left и margin-right значение auto (а также прописав для него конкретный width , иначе он займёт всю ширину родительского контейнера и не будет нуждаться в центрировании). Для этого часто используют сокращённую запись:
.center-me < margin: 0 auto; >
Способ работает независимо от ширины центрируемого блочного элемента и его родителя.
Обратите внимание, что заставить элемент плавать по центру с помощью float нельзя. Хотя есть одна хитрость.
Вам нужно центрировать несколько блочных элементов?
Если вы имеете дело с двумя и больше блочными элементами, размещёнными в ряд, которые нужно центрировать по горизонтали, возможно, вам потребуется изменить тип display . Вот что произойдёт, если указать для них тип отображения inline-block или применить flexbox:
В том же случае, если у вас несколько блочных элементов размещены друг над другом, вполне сработает приём с автоматическими отступами:
По вертикали
С вертикальным центрированием в CSS все немного сложнее:
Это элемент строчного типа или строчно-* (как текст или гиперссылки)?
Он помещается в одну строку?
Иногда строчные/текстовые элементы могут выглядеть отцентрированными по вертикали только потому, что у них одинаковые верхнее и нижнее поля ( padding ).
.link < padding-top: 30px; padding-bottom: 30px; >
Если использование полей по какой-либо причине невозможно, а вы хотите отцентрировать текст, который точно не будет переноситься в следующую строку, можно использовать хитрость с установкой line-height равной высоте элемента, это отцентрирует текст:
.center-text-trick < height: 100px; line-height: 100px; white-space: nowrap; >
Элемент занимает несколько строк?
Центрирование нескольких строчек текста также можно сделать с помощью установки одинаковых верхнего и нижнего полей, однако, если этот вариант вам не подходит, можно сделать элемент, в который помещён текст, ячейкой таблицы — буквально или же просто её имитацией на CSS. За центрирование в этом случае отвечает свойство vertical-align , несмотря на то, что обычно он просто выравниванивает по горизонтали элементы в ряду. (Более подробно об этом.)
Если вы имеете дело с некоей имитацией таблицы, может быть, стоит использовать flexbox? Один дочерний flex-элемент можно довольно легко отцентрировать во flex-родителе.
.flex-center-vertically < display: flex; justify-content: center; flex-direction: column; height: 400px; >
Помните, что этот способ подходит только если у родительского контейнера указана конкретная ширина (px, % и т.д.), поэтому здесь у контейнера есть высота.
Если оба этих способа не подходят, можно использовать приём «элемент-призрак», при котором в контейнер помещается псевдоэлемент с максимальной высотой, и текст выравнивается по горизонтали по этому элементу:
.ghost-center < position: relative; > .ghost-center::before < content: " "; display: inline-block; height: 100%; width: 1%; vertical-align: middle; > .ghost-center p < display: inline-block; vertical-align: middle; >
Это блочный элемент?
Вам известна высота элемента?
Обычно, когда речь идёт о веб-странице, высота может быть неизвестна по многим причинам: если изменяется ширина элемента, перераспределение текста может изменить высоту. Вариации в стилизации текста могут изменить высоту. Изменение количества текста может изменить высоту элемента. Элементы с фиксированным соотношением сторон, например, изображения, могут изменить высоту при масштабировании — и так далее.
Но, если вам известна высота, вертикальное центрирование можно сделать так:
.parent < position: relative; > .child < position: absolute; top: 50%; height: 100px; margin-top: -50px; /* учитывайте поля и границы, если не используете box-sizing: border-box; */ >
Вам неизвестна высота элемента?
Его все-таки можно центрировать, подняв вверх на половину его высоты после того, как сдвинули его наполовину вниз:
.parent < position: relative; > .child < position: absolute; top: 50%; transform: translateY(-50%); >
Вы можете использовать flexbox?
Не удивительно, что всё это можно сделать значительно проще с помощью flexbox.
.parent < display: flex; flex-direction: column; justify-content: center; >
И по горизонтали, и по вертикали
Описанные выше приёмы можно комбинировать как угодно, чтобы получить идеально отцентрированные элементы. Но, по моему опыту, обычно всё сводится к трём вариантам:
У элемента фиксированная высота и ширина?
Использование отступов с отрицательными значениями, равными половине высоты и ширины элемента после того, как для него было прописано абсолютное позиционирование в точке 50%/50%, отцентрирует элемент внутри родителя. Кроме того, способ хорошо поддерживается браузерами:
.parent < position: relative; > .child < width: 300px; height: 100px; padding: 20px; position: absolute; top: 50%; left: 50%; margin: -70px 0 0 -170px; >
Высота и ширина элемента неизвестны?
Если вам не известны ширина или высота, для центрирования можно использовать свойство transform и отрицательное значение translate по 50% в обоих направлениях (оно вычисляется от текущей ширины/высоты элемента):
.parent < position: relative; > .child < position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); >
Вы можете использовать flexbox?
Чтобы выполнить центрирование в обоих направлениях с помощью flexbox, нужно использовать два центрирующих свойства:
.parent < display: flex; justify-content: center; align-items: center; >
Заключение
С помощью CSS вы можете отцентрировать всё что угодно.
Как сделать элементы по центру в контейнере div
Вот мне говорили что нужно justify-content: center; но тут это не работает — почему? Хочу чтобы эти 2 элемента (видео и форма) были по центру в div.main_content (если нужно прикреплю код — пишите)
Отслеживать
задан 25 фев в 15:56
nevazno_html_css_js_1 nevazno_html_css_js_1
27 4 4 бронзовых знака
Скорее всего из-за того, что блоки внутри заняли все 80% флексового родителя. Попробуйте margin: 0 auto .
25 фев в 15:58
да margin:auto помог @OliverPatterson спасибо тебе большое что отвечаешь на вопросы
25 фев в 16:01
Можете написать в телеграм и спрашивать там ��♂️
25 фев в 16:02
Попробуйте text-align: center; И прикрепите, пожалуйста, ваш код.
25 фев в 16:04
Margin: 0px auto
25 фев в 16:11
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
margin:0 auto помогло
Автор ответа:@Oliver Patterson
body < background-color: #151515; >.main_content
Enter your email
Get instruction
Предыдущая запись