Button не работает margin 0 auto

CSS margin:auto — Как это работает?

Использование margin:auto , чтобы отцентрировать блочный элемент по горизонтали, это хорошо известный способ. Но задумывались ли вы, как это работает?

Результат действия значения auto зависит типа элемента и контекста. Для отступов сверху CSS auto может означать одно из двух: занять все свободное пространство или 0 пикселей. В зависимости от этого будет задаваться различная структура.

«auto» — занять все доступное пространство

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

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

Имитация плавающего поведения через распределение доступного пространства

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

«auto» — задать 0 пикселей

Как упоминалось выше, auto не работает для плавающих, строчных и абсолютно позиционированных элементов. Для них уже определена структура, так что в использовании margin auto нет смысла.

Это будет только нарушать изначальную структуру. В том числе и для отступа текста сверху CSS . Следовательно, auto будет задавать значение 0 пикселей для отступов этих элементов.

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

Значение auto будет определять отступ в 0 пикселей, когда для блочного элемента задана ширина auto или 100% . Обычно он занимает всю ширину контейнера, следовательно, на ширину отступа останется 0 пикселей.

Что происходит с вертикальными отступами со значением auto?

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

«Если для “margin-top” или “margin-bottom” задано «auto», для них используется значение, равное 0″.

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

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

Или из-за эффекта объединения отступов ( слияния отступов соседних элементов ). Это еще одно исключение из данного правила определения вертикальных отступов.

Центрирование абсолютно позиционированных элементов

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

В другой спецификации W3C сказано:

«Если для всех трех позиций (“left”, “width” и “right”) задано значение «auto», сначала установите 0 для “margin-left” и “margin-right…»
» Если «auto» задано только для “margin-left” и “margin-right», тогда решите уравнение с дополнительным условием, чтобы для обоих отступов была задана одинаковая ширина».

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

В спецификации также упоминается что-то подобное и для отступов сверху CSS div.

«Если для «top», «height» и «bottom» задано значение «auto» , установите для «top» позицию static…»

«Если для одной из трех позиций не установлено значение «auto»: если для «top» и «bottom» установлено значение «auto», решите уравнение с дополнительным условием, чтобы задать для этих отступов одинаковые значения».

Следовательно, чтобы отцентрировать по вертикали абсолютно позиционируемый элемент top , height и bottom не должны иметь значение auto .

Теперь, объединив все это, мы получим следующее:

Заключение

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

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

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

Пожалуйста, оставляйте свои отзывы по текущей теме материала. За комментарии, дизлайки, лайки, подписки, отклики огромное вам спасибо!

Источник

Не работает выравнивание margin: 0 auto;

Со свойством min-width не работает margin: 0 auto, с max-width и width всё нормально :/
Вот код:

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Выравнивание элементов с помощью margin:auto
привет, друзья! объясните мне: почему не работает свойство выравнивает только по.

Не работает margin 0 auto
не смещает картинку в центр, подскажите что не так делаю? 4

Решение

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

margin: 0px auto;
В чём различия между: margin: 0px auto; margin: auto; margin: 0 auto; Во многих верстках.

Margin 0 auto для iOS
Здравствуйте. Имеется сайт, состоит из #header, #contentMain и #footer. У #contentMain стоит.

Что такое margin:auto?
Прочитал margin:auto указывает, что размер отступов будет автоматически рассчитан браузером. Есть.

Margin:0 auto что значит?
Доброго времени суток! Не могу найти, что означает margin:0 auto. 0 это понятно, -нет полей, а 0.

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

Источник

`margin: auto;` не работает со встроенными блочными элементами

У меня есть «контейнер» div , которому я отдал margin:auto; .

Он работал нормально, пока я дал ему конкретный width , но теперь я изменил его на inline-block , и margin:auto; перестал работать

Старый код (работает)

Новый код (не работает)

4 ответа

Он больше не центрирован, потому что теперь он перемещается по странице так же, как элементы inline (очень похоже на элементы img ). Вам потребуется text-align: center содержащий элемент, чтобы центрировать inline-block div .

Что означает слово «авто»:

Использование auto для горизонтального поля укажет элементу заполнить доступное пространство (источник: http://www.hongkiat.com/blog/css-margin-auto/).

Почему display: inline-block не центрируется:

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

Почему «display: block» по центру:

При использовании в качестве элемента с установленным для него display: block доступное горизонтальное пространство будет равняться полной ширине родительского элемента за вычетом ширины самого элемента. Это имеет смысл, потому что display: block резервирует это горизонтальное пространство (тем самым делая его «доступным»). Обратите внимание, что элементы с display: block нельзя размещать рядом друг с другом. Единственное исключение возникает, когда вы используете float , но в этом случае вы также получаете (ожидаемое) поведение с нулевым запасом, поскольку это отключает горизонтальную «доступность».

Решение для элементов inline-block:

К элементам с display: inline-block следует подходить как к символам. Центрирование символов / текста может быть выполнено путем добавления text-align: center к их родительскому элементу (но вы, вероятно, уже знали это . ).

Для элементов со свойством display: inline-block ; Вычисленное значение «auto» для «margin-left» или «margin-right» становится используемым значением «0». [reference: CSS2§10.3.9]

Источник

не работает margin:0 auto;

Спросил itook.ru,
7 мая 2016

Вопрос

itook.ru

Доброго времени суток, столкнулся с такой проблемой, искал решение, нашел на вашем форуме похожую тему но рекомендации оттуда мне не помогли, проблема в том что я не могу отцентрировать блок div

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

Вот собственно и сам div

если этих данных недостаточно, предоставлю еще, вот адрес сайта i-took.ru, заранее благодарю за помощь

Изменено 7 мая 2016 пользователем itook.ru

Ссылка на комментарий

Поделиться на других сайтах

2 ответа на этот вопрос

Рекомендованные сообщения

Присоединяйтесь к обсуждению

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

Похожие публикации

Всем привет) Самостоятельно обучаюсь верстке. Сейчас изучаю Bootstrap и столкнулась с такой проблемой:
Использую в верстке стандартный контейнер из Bootstrap’а. Его стили не трогаю.
Сейчас корплю над адаптивностью сайта и при изменении размера устройства (в консоли разработчика) на 768px шапка вылезает за пределы экрана.
Как удалось выяснить header принимает требуемое значение width: 768px, а вот nav упорно занимает 993px и они тянутся от container’а (он согласно стилям Bootstrap’а имеет max-width: 720px, но его margin-left и margin-right почему-то принимают значение 136,50px.
Дополнение: тегу nav в стилях задан width: 100%.
Вопрос:
1. Правильно ли я понимаю, что cтандартный контейнер из Bootstrap’а должен был в данном примере рассчитаться так: width=max-width=720px, margin-left=margin-right=(768px-720px-12pxpadding-left-12pxpadding-right)/2=12px?
2. Почему margin’ы работают не так как я ожидаю?)
Если я что-то неясно или не совсем корректно изложила прошу понять и простить :)))
Спасибо за ответы.

Ребят всем привет! Я только начал изучать верстку по видео урокам на ютубе. У меня есть свой макет который я купил у дизайнера. Решил с него поучиться верстать. Подскажите как правильно сделать шапку сайта. У меня все выравнивания происходят с помощь отрицательных «margin». Судя по урокам, везде делают это с помощью flex и тому подобное. Дизайн очень оказался сложным и там много проблем с фонами. Дайте пару советов и подсказок как продолжать дальше. Заранее спасибо ?

Вот: макет:
Мой сайт

Вот кот. Предполагается, что элемент не выводится из потока (по крайней мере, нужно чтоб он взаимодействовал в «строке» с другими элементами, предполагается, что за block-center могут также находится элементы). Загвоздка следующая: левый блок (block-1) имеет минимальный размер в пикселях(150px) и натуральный размер в rem (15rem, при том, что 1rem = 10px). Хочется оставить пользователю возможность менять в браузере размер шрифта, при этом положение левого края второго элемента (block-center) должно оставаться посередине (или в ином заданном месте).
Для второго элемента указано свойство:
padding-left: calc(50% — 15rem); /* тут может быть и 150px*/ При использовании rem во-второй части выражения, элемент уходит вправо, при маленьком шрифте (отнимается меньше — отступ больше),
если в выражении использовать пиксели, то элемент уйдёт вправо при большом шрифте (просто левый элемент увеличится).
И в том, и в другом случае, для компенсации сдвига вправо, нужно сдвинуть элемент ВЛЕВО. Но сдвинуть не абсолютно, а при условии. Основные инструменты для сдвигов: марджины паддиги и бордеры прилежащих сторон элементов block-1 и block-center. Можно было бы как-то изловчится с паддингами (что-то вроде 15rem — 150px, положительное значение будет только при значении браузерного шрифта большего, чем по-умолчанию, значит только тогда он и начнёт работать), но паддинг может сдвинуть только вправо. Марджин может сдвинуть и туда и туда, но он безусловен, то есть, не может в одном случае сдвигать, а в другом — не сдвигать.
Была идея как-то сделать, чтоб паддинг и марджин взаимно компенсировали друг друга, когда нам надо, а когда не нужно паддинг, стал меньше нуля, и исчез, но на практике мне не удалось это реализовать.
В случае, когда отнимаем rem (в указанном выше коде), при нулевом font-size отступ максимален. Соответственно, сдвиг влево должен быть максимален и равняться ширине элемента block-1 в пикселях. Допустим ставим элементу block-center отрицательный левый марджин (или отрицательный правый марджин ставим block-1), сдвигая block-center на нужную величину, а, чтоб при увеличении шрифта отступ уменьшался, пишем block-1 , что при маленьких шрифтах будет сдвигать блок block-center влево, но при больших будет сдвигать вправо и как это компенсировать — не понятно.
В случае, когда отнимаем px, при маленьких шрифтах всё хорошо, поскольку и block-1, и отступ — нужных размеров, но когда шрифт увеличивается, элемент block-1 увеличивается, а расстояние между блоками block-1 и block-center остаётся таким же, и опять-таки нужно каким-то образом компенсировать, а любой марджин — будет действовать в обе стороны, а паддинг — в одну, но только вправо, а мне нужно налево.
В общем, не оставляют меня мысли, что тут можно применить какую-то хитрость и скомпенсировать увеличение отступа, при изменении шрифта, но что-то, как не изгаляюсь, паддинг сдвигает не туда, марджин сдвигает не только туда, но и не туда, при этом паддинг это «не туда» скомпенсировать не может, поскольку сам вылезает туда же, в «не туда».
Каким образом приручить эти элементы?

———————————————————————————————————————————————————
#container <
margin: 0 auto;
>
#container .header <
border-bottom: 1px solid #bfbfbf;
box-shadow: 0 0 3px #dbdbdb;
padding-top: 6px;
>
#container .header .wrap <
display: flex;
justify-content: space-between;
padding: 0;
>
@media (max-width: 650px) <
.header .wrap <
flex-direction: column;
padding: 0 3px;
margin-bottom: 5px;
>

.header #socials <
margin-left: 5px;
>

.header #socials a:last-child <
margin-right: 2px;;
>
>
#container .header .header_left <
align-self: center;
>
#container .header .header_right <
display: flex;
justify-content: space-between;
>
#container #topmenu <
color: #8e8e8e;
padding-top: 6px;
>
#container #topmenu a <
color: #8e8e8e;
text-decoration: none;
>
#container #topmenu a:hover <
color: #dd5555;
>
#container #social <
display: flex;
margin-left: 20px;
margin-right: 50px;
>
#social a <
margin-top: 9px;
margin: 8px 10px;

Источник