Содержание

css — Не работает margin 0 auto для центрирования контейнера

Вопрос задан

Изменён 1 год 4 месяца назад

Просмотрен 310 раз

Всем привет! начал изучать верстку, пытаюсь слепить сайт и надо центрировать содержимое container но margin 0 auto не срабатывает, буду рад если мне кто-нибудь подскажет и поможет! заранее спасибо!

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="css2/style.css">
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/style.css">
  <title>Сайт ForBelka</title>
</head>
<body>
  <header>
    <div>
      <a href="">
        <img src="img/logo. svg" alt="Logo">
      </a>
      <a>
        <img src="img/Component2.svg" alt="Burger">
      </a>
      <a>
        <img src="img/instagram1.svg " alt="instagram">
      </a>
    </div>
  </header>
  <main>
    <section>
      <div>
        <div>
          <span>Онлайн курс</span>
          <h2>ИНВЕСТИЦИИ НА ДИВАНЕ</h2>
          <p class= "hero-text">Уже после первого занятия вы почувствуете, что вы «в теме». Курс стартует <strong>24 мая!</strong></p>
          <button>Записаться на курс</button>
        </div>
      </div>        
    </section>
    <div>
      <div>
        <h3>ПРОГРАММА КУРСА</h3> 
        <h4>Вводное занятие. Инвестиции и биржа.</h4>
        <span>1</span>
        <span>Вы будете знать</span>
        <ul>
          <li>Какие бывают виды инвестиций?</li>
          <li>Зачем нам инвестировать?</li>
          <li>Куда деваются наши деньги на&nbsp;фондовом рынке?<br>Как это работает? Разбор основных понятий</li>
          <li>Виды бирж и наши пути выхода на биржу</li>
        </ul>
        <h4>Выбор брокера.
 
 
  Брокерские счета.</h4>
        <span>1</span>
        <span>Вы будете знать</span>
        <ul>
          <li>ТОП брокеров РФ. Условия открытия счета,<br>комисии, отличия</li>
          <li>Резиденты и&nbsp;нерезиденты РФ&nbsp;&mdash;<br>кому и&nbsp;где можно открыть счет?</li>
          <li>Обзор зарубежных брокеров <br> и&nbsp;когда они нам нужны. Условия открытия счета</li>
          <li>Разбор отличий брокерских счетов в&nbsp;РФ <br>и&nbsp;заграницей, преимущества заграничного счета<br>и&nbsp;преимущества ИИС, виды вычетов</li>
        </ul>
        <h4>Акции.</h4>
        <span>3</span>
        <span>Вы будете знать</span>
        <ul>
          <li>Как на этом зарабатывать?</li>
          <li>Дивидендный гэп и как его выгодно использовать?</li>
          <li>Освоение мультипликаторов</li>
          <li>Классификация акций по&nbsp;их&nbsp;надежности<br>и&nbsp;доходности</li>
        </ul>
      </div>
    </div>
    <div>
      <div>
        <h5>ЗАПОЛНИ ФОРМУ И ВЫБЕРИ ТАРИФ</h5>
        <div></div>
        <form action="">
          <input type="text" placeholder="Введите имя">
          <input type="text" placeholder="Ваш e-mail">
          <button>Перейти к выбору тарифа</button>
        </form>
     </div>
    </div>
    <div>
      <div>
        <h5>ПОСМОТРИ ТРЕЙЛЕР ОБУЧЕНИЯ</h5>
        <iframe src="https://www.
 
 
 
 youtube.com/embed/GhMwJsgHqAs" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>
    </div>
  </main>
  <footer>
    <div>
      <a href="" alt="logo Kaskun">
        <img src="img/logo1.svg">
      </a>
      <a href="">
        <p>Договор-оферта</p>
      </a>
      <a href="">
        <p>Политика конфиденциальности</p>
      </a>
      <a download href="img/договор оферты.футер.docx"> 
        <p>Политика сбора персональных данных</p>
      </a>
      <a alt='Instagramlink'>
        <img src="img/instagram 1.svg">
      </a>
    </div>
  </footer>
</body>
</html>

5

Чтобы какой-либо элемент центрировался он должен быть блочный то есть

Display: block;

Также проверьте, правильно ли у вас указан класс в css

. container

И ещё, возможно вы забыли указать ширину контейнера

width: 1330px;

15

Ваш ответ

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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

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

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

  • «auto» — занять все доступное пространство
  • Имитация плавающего поведения через распределение доступного пространства
  • «auto» — задать 0 пикселей
  • Что происходит с вертикальными отступами со значением auto?
  • Центрирование абсолютно позиционированных элементов
  • Заключение

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

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

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

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

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

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

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

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, которые больше подходят для этого.

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

Вадим Дворниковавтор-переводчик статьи «CSS – margin auto – How it Works»

Почему margin 0 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]

Центрирование горизонтальное и вертикальное

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

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

text-align

Для центрирования инлайновых элементов – достаточно поставить родителю text-align: center :

Для центрирования блока это уже не подойдёт, свойство просто не подействует. Например:

margin: auto

Блок по горизонтали центрируется margin: auto :

В отличие от width/height , значение auto для margin само не появляется. Обычно margin равно конкретной величине для элемента, например 0 для DIV . Нужно поставить его явно.

Значение margin-left:auto/margin-right:auto заставляет браузер выделять под margin всё доступное сбоку пространство. А если и то и другое auto , то слева и справа будет одинаковый отступ, таким образом элемент окажется в середине. Детали вычислений описаны в разделе спецификации Calculating widths and margins.

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

Для горизонтального центрирования всё просто. Вертикальное же изначально не было предусмотрено в спецификации CSS и по сей день вызывает ряд проблем.

Есть три основных решения.

position:absolute + margin

Центрируемый элемент позиционируем абсолютно и опускаем до середины по вертикали при помощи top:50% :

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

Высота центрируемого элемента должна быть известна. Родитель может иметь любую высоту.

Если мы знаем, что это ровно одна строка, то её высота равна line-height .

Приподнимем элемент на пол-высоты при помощи margin-top :

При стандартных настройках браузера высота строки line-height: 1.25 , если поделить на два 1.25em / 2 = 0.625em .

Конечно, высота может быть и другой, главное чтобы мы её знали заранее.

Можно аналогично центрировать и по горизонтали, если известен горизонтальный размер, при помощи left:50% и отрицательного margin-left .

Одна строка: line-height

Вертикально отцентрировать одну строку в элементе с известной высотой height можно, указав эту высоту в свойстве line-height :

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

Таблица с vertical-align

У свойства vertical-align, которое управляет вертикальным расположением элемента, есть два режима работы.

В таблицах свойство vertical-align указывает расположение содержимого ячейки.

Его возможные значения:

baseline Значение по умолчанию. middle , top , bottom Располагать содержимое посередине, вверху, внизу ячейки.

Например, ниже есть таблица со всеми 3-мя значениями:

Обратим внимание, что в ячейке с vertical-align: middle содержимое находится по центру. Таким образом, можно обернуть нужный элемент в таблицу размера width:100%;height:100% с одной ячейкой, у которой указать vertical-align:middle , и он будет отцентрирован.

Но мы рассмотрим более красивый способ, который поддерживается во всех современных браузерах, и в IE8+. В них не обязательно делать таблицу, так как доступно значение display:table-cell . Для элемента с таким display используются те же алгоритмы вычисления ширины и центрирования, что и в TD . И, в том числе, работает vertical-align :

Этот способ замечателен тем, что он не требует знания высоты элементов.

Однако у него есть особенность. Вместе с vertical-align родительский блок получает табличный алгоритм вычисления ширины и начинает подстраиваться под содержимое. Это не всегда желательно.

Чтобы его растянуть, нужно указать width явно, например: 300px :

Можно и в процентах, но в примере выше они не сработают, потому что структура таблицы «сломана» – ячейка есть, а собственно таблицы-то нет.

Это можно починить, завернув «псевдоячейку» в элемент с display:table , которому и поставим ширину:

Если дополнительно нужно горизонтальное центрирование – оно обеспечивается другими средствами, например margin: 0 auto для блочных элементов или text-align:center на родителе – для других.

Центрирование в строке с vertical-align

Для инлайновых элементов ( display:inline/inline-block ), включая картинки, свойство vertical-align центрирует сам инлайн-элемент в окружающем его тексте.

В этом случае набор значений несколько другой:

Это можно использовать и для центрирования, если высота родителя известна, а центрируемого элемента – нет.

Допустим, высота внешнего элемента 120px . Укажем её в свойстве line-height :

Работает во всех браузерах и IE8+.

Свойство line-height наследуется, поэтому надо знать «правильную» высоту строки и переопределять её для inner .

Центрирование с vertical-align без таблиц

Если центрирование должно работать для любой высоты родителя и центрируемого элемента, то обычно используют таблицы или display:table-cell с vertical-align .

Если центрируются не-блочные элементы, например inline или inline-block , то vertical-align может решить задачу без всяких таблиц. Правда, понадобится вспомогательный элемент (можно через :before ).

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

Для всех современных браузеров и IE8 можно добавить вспомогательный элемент через :before :

В пример выше добавлено также горизонтальное центрирование text-align: center . Но вы можете видеть, что на самом деле внутренний элемент не центрирован горизонтально, он немного сдвинут вправо.

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

  1. Убрать лишний пробел между div и началом inner , будет <div >.
  2. Оставить пробел, но сделать отрицательный margin-left у inner , равный размеру пробела, чтобы inner сместился левее.
Центрирование с использованием модели flexbox

Данный метод поддерживается всеми современными браузерами.

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

Итого

Обобщим решения, которые обсуждались в этой статье.

Для горизонтального центрирования:

  • text-align: center – центрирует инлайн-элементы в блоке.
  • margin: 0 auto – центрирует блок внутри родителя. У блока должна быть указана ширина.

Для вертикального центрирования одного блока внутри другого:

Если размер центрируемого элемента известен, а родителя – нет

Родителю position:relative , потомку position:absolute; top:50% и margin-top:-<половина-высоты-потомка> . Аналогично можно отцентрировать и по горизонтали.

Если нужно отцентрировать одну строку в блоке, высота которого известна

Поставить блоку line-height: <высота> . Нужны конкретные единицы высоты ( px , em …). Значение line-height:100% не будет работать, т.к. проценты берутся не от высоты блока, а от текущей line-height .

Высота родителя известна, а центрируемого элемента – нет.

Поставить line-height родителю во всю его высоту, а потомку поставить display:inline-block .

Почему margin 0 auto не работает

Регистрация на форуме тут, о проблемах пишите сюда — [email protected], проверяйте папку спам! Обязательно пройдите восстановить пароль

Поиск по форуму
Расширенный поиск
К странице.

Никак не хочет работать css-стиль margin: 0 auto. Во всех браузерах для настольных компьютеров все центрируется как нужно, а вот в мобильных устройствах — нет. Проверял на iPad, iPhone и SGS3.

Буду рад любой помощи.

P.S. Пробовал добавлять text-align: center для body — результата ноль.

1. явно задать ширину блока width
(особенно айосникам)

2. полюбому заставить быть блочным display:block;
3. margin:auto;


Интенсив по Python: Работа с API и фреймворками 24-26 ИЮНЯ 2022. Знаете Python, но хотите расширить свои навыки?
Slurm подготовили для вас особенный продукт! Оставить заявку по ссылке — https://slurm.club/3MeqNEk

css — Что именно нужно для «margin: 0 auto;» работать?

Спросил

Изменено 9 месяцев назад

Просмотрено 164k раз

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

Итак, мой вопрос прост: какие свойства CSS должны быть установлены для элемента и его родителя, чтобы margin: 0 auto; влево-вправо по центру ребенка?

2

Не пришло мне в голову:

  1. Элемент должен быть блочным, т. е. Дисплей : блок или дисплей : таблица
  2. Элемент не должен плавать
  3. Элемент не должен иметь фиксированное или абсолютное положение 1

Вне головы других людей:

  1. Элемент должен иметь ширину , отличную от auto 2

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

1

Есть одно исключение: если у вашего фиксированного или абсолютно позиционированного элемента осталось : 0; справа: 0 , это будет по центру с автоматическими полями. 9″ не работай».

8

По моему мнению, ему нужна ширина . Вам нужно указать ширину контейнера, который вы центрируете (а не родительскую ширину).

1

Полное правило для CSS:

  1. ( дисплей: блок И ширина не авто) ИЛИ дисплей: таблица
  2. с плавающей запятой: нет
  3. позиция: относительная
    ИЛИ позиция: статическая

ИЛИ

  1. родительский элемент с дисплеем : гибкий

1

Убедитесь, что div , который вы пытаетесь центрировать, не установлен на width: 100% .

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

Навскидку, если элемент не блочный — сделайте так.

, а затем укажите ширину.

Он также будет работать с display:table — полезным свойством отображения в данном случае, поскольку для него не требуется установка ширины. (Я знаю, что этому посту 5 лет, но он все еще актуален для прохожих 😉

Вот мое предложение:

 Во-первых:
      1. Добавить отображение: блок или таблица
      2. Добавить позицию: относительная
      3. Добавьте ширину: (проценты также подходят)
Второй:
      если описанный выше трюк не работает, вам нужно добавить float:none;

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

Возможно, интересно, что вам не нужно указывать ширину для элемента