Не работает margin 0 auto – Абсолютное горизонтальное и вертикальное центрирование / Habr

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

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

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

Это наиболее распространенный способ использования 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» , подготовленной дружной командой проекта Интернет-технологии.ру

CSS центрирование margin:0 авто, не работает

У меня проблема с margin:0 auto; я уверен, что решение простое, но я просто делаю что-то неправильно. Это мой первый сайт, который я создаю самостоятельно, и у меня возникли некоторые проблемы с центрированием различных блоков.

Первая проблема, с которой я столкнулся с содержанием, не центрированным его родителем класса селектора h3 и классов статей. margin:0 auto; ничего не делает. Я добавил margin:0 auto; к content h3 , и он начал работать. Мне трудно объяснить это, так как я еще не понимаю этого полностью. У меня есть это:

content {
    width:auto;
    max-width:1360px;
    margin:0 auto;
}
content h3  {   
    width:auto;
    max-width:900px;
    margin:40px auto 0 auto;
    text-align:center;
    font-size:1.6em;
    font-family:"Open Sans", sans-serif;
    letter-spacing:0.2em;
    color:#92908d;
    line-height:40px;
    font-weight:600;
}

Почему первый margin:0 auto в содержании не работает для content h3 ? У меня также возникают проблемы с тем, что статьи не центрируются, они в значительной степени правильно настроены сейчас, но просто не центрированы, почему это так?

Вот мой полный код html всего тела

<div></div>
    <header>
    <section>
        <h2>stwórz swój własny antydot</h2>
        <ul>
            <li>
                <img src="img/icons/home.png" alt="moje konto"/><a href="#">moje konto</a>      
            </li>
            <li>
                <img src="img/icons/register.png" alt="rejestracja"/><a href="#">rejestracja</a>
            </li>
        </ul>
    </section>
    <section>
        <img src="img/banner/slide1.jpg">
    </section>
      <div>
    <section>

        <nav>
            <ul>
                <li><a href="#">O nas</a></li>
                <li><a href="#">aktualności</a></li>
                <li><a href="#">sklep</a></li>
                <li><a href="#">kolekcje</a></li>
            </ul>
        </nav>
        <div>
                <img src="img/logo.png"/>
        </div>
    </section>
    </header>
    <content>
        <h3>Lorem ipsum dolor sit amet, <br>
consectetur adipiscing elit. vel est diam, vel fermentum eros. </h3>
        <div></div>
        <section>
            <article>
                <h4>O nas</h4>
                <img src="img/content/leftbw.jpg" alt="kołnierzyki">
                <h5>InInteger elementum</h5>
                <p>>massa at nullażżżż placerat varius. Suspendisse in libero risus, in     interdum massa.</p>
                <p>Vestibulum ac leo vitae metus faucibus gravida ac in neque. Nullam est eros, </p>
                <p>suscipit sed dictum quis, accumsan a ligula. reet volutpat molestie. </p>
                <a href="#">Czytaj...</a>
            </article>
            <article>
                <h4>wpisy</h4>
                <img src="img/content/midbw.jpg" alt="blog">
                <h5>Tytuł</h5>
                <p>29/06/2013</p>
                <p>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. a pellentesque dui, non feli....</p> 
                <h5>Tytuł</h5>
                <p>29/06/2013</p>
                <p>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. a pellentesque dui, non feli....</p> 
                <a href="#">czytaj...</a>                  
            </article>
            <article>
                <h4>kontakt</h4>
                <img src="img/content/rightbw.jpg" alt="kontakt">
                <form>

                </form>
                <ul>
                    <li><a href="#"><img src="img/content/iconfacebook.png" alt="facebook"></a></li>
                    <li><a href="#"><img src="img/content/iconyoutube.png" alt="youtube"></a></li>
                    <li><a href="#"><img src="img/content/icontwitter.png" alt="twitter"></a></li>
                    <li><a href="#"><img src="img/content/icongoogle.png" alt="google"></a></li>
                </ul>
            </article>
        </section>  
    </content>
    <footer>
            <p>Copyright © 2012 - <a href="#">Antydot.com</a> - All rights reserved</p>
            <ul>
                <li><a href="#">O nas</a></li>
                <li><a href="#">aktualności</a></li>
                <li><a href="#">sklep</a></li>
                <li><a href="#">kolekcje</a></li>
            </ul>
    </footer>
      <div></div>

и мой полный CSS до сих пор

    a   {
        text-decoration: none;
        color: inherit;
        transition: color .5s ease;
    }

    body    {
        background:#f8f1ea;
        font-family:"Open Sans", sans-serif;
        color:#656565;  
    }
    a:hover {
        color: #b1473f;
    }
    .blackbar   {
        position:absolute;
        z-index:-1;
        width:100%; 
        height:50px;
        background-color:#363636;
    }
    .top    {
        width:100%;
        max-width:1360px;
        margin:0 auto;  
    }
    .top h2 {
        float:left; 
        margin:5px 0 5px 20px;
        font-family:"Open Sans", sans-serif;
        font-size:18px;
        color:#d1d0d0;
        font-weight:bold;
        text-transform:uppercase;
        letter-spacing:0.1em;

    }
    .top ul li  {
        list-style-type:none;
        display:inline-block;
        float:right;
        margin:5px 20px 5px 0;
        position:relative;  
        text-transform:uppercase;
        color:#d1d0d0;
        letter-spacing:0.15em;
        font-weight:500;
        font-size:15px;
        font-family:"Open Sans", Sans-Serif;

    }
    .top ul li img  {
        margin:0 15px 0 0;  
    }

    .blackbar2{
        position:relative;
        max-width:2500px;
        width:100%; 
        height:80px;
        background-color:#1d1d1d;   
    }
    .lowerbar   {
        width:100%;
        max-width:1360px;
        margin:0px auto 0 auto;
        position:relative;
        z-index:999;
    }
    .banner img {
        width:100%;

    }
    .logo {
        margin:0 0 5px 20px;
        position:relative;
        top:23px;
        z-index:10;

    }
    nav ul  {
        list-style:none;
    }


    nav ul li   {
        display:block;
        float:right;
        padding:0 20px;
        position:relative;
        z-index:12;
        top:23px;
        color:#d1d0d0;
    }


    nav ul li a {
        font-family: 'Open Sans', sans-serif;
        text-transform: uppercase;
        font-size:15px;
        font-weight:500;

    }

    content {
        width:auto;
        max-width:1360px;
        margin:0 auto;
    }
    content h3  {   
        width:auto;
        max-width:900px;
        margin:40px auto 0 auto;
        text-align:center;
        font-size:1.6em;
        font-family:"Open Sans", sans-serif;
        letter-spacing:0.2em;
        color:#92908d;
        line-height:40px;
        font-weight:600;
    }

    .seperator {
        height:1px;
        background:#de564b;
        max-width:900px;
        margin:0 auto 0 auto;
        border-bottom:1px solid #de564b;
        position:relative;
        top:40px;
    }



    .maincontent    {
        width:auto;
        max-width:1360px;
        margin:0 auto;
        padding:70px 0 45px 0;
    }

    .maincontent article {
        width:250px;
        margin-right:45px;
        float:left;
    }
    footer  {
        clear:both; 
    }
html css center

Поделиться Источник user2762977     09 сентября 2013 в 22:25

2 Ответа



1

Прежде всего, вам не нужно указывать width:auto в большинстве случаев, потому что свойство 'width' по умолчанию имеет значение auto, см. http://www.w3.org/TR/CSS2/visudet.html#the-width-property . Другими словами, не имеет значения, указываете вы его или нет.

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

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

Есть по крайней мере два хороших способа решить эту проблему в вашем адаптивном дизайне. Либо используйте javascript для динамической установки ширины на основе элементов блока статьи, либо используйте запросы @media для установки ширины в зависимости от ширины устройства / браузера.

margin:0 auto для содержимого не будет работать для content h3 или любого другого дочернего элемента, поскольку свойство css margin не наследуется. увидеть http://www.w3.org/TR/CSS2/propidx.html

Поделиться Nicholas.V     10 сентября 2013 в 00:35



0

Элемент не существует в html. Вы должны изменить его на что-то вроде ". Однако, если вы хотите использовать этот несуществующий элемент, возможно, он работает с "display:block;"

Поделиться Oscar Otero     09 сентября 2013 в 22:39



Центрирование div, margin: 0 auto; не работает

После поиска в центре моего div все, что я мог получить, было margin: 0 auto; вместе с назначенной шириной, но все равно это не работает. Моя проблема-просто центрировать div. Я понятия не имею,...


Перетаскивать и Margin:0 авто;

Существует проблема с jQuery UI sortable/draggable,, где , если перетаскиваемый элемент центрируется с помощью margin:0 auto , перетаскивание начинается с левой стороны контейнера, а не с центра,...


Почему не работает margin:0 авто?CSS

Я попытался выровнять центр этих элементов на странице контактов. http://avocat.dac-proiect.ro/wp/?помощью page_id=19 .contactform11 .wdform_section.{ /* margin-left:280px; */ /* margin-top:55px; */...


CSS margin:0 авто не работает на li>a

Я хочу, чтобы панель навигации с ее элементами (li>a) была посередине. Я добился только стиля float left. #wrapper { width: 900px; margin: 0 auto; } li { float: left; } ul>li>a { display:...


margin:0 авто не работает в интернете explorer

margin:0 auto не работает в internet explorer. Он хорошо работает в firefox. Пожалуйста, проверьте сайт http://jobslanda.com / #Body{ background: none repeat scroll 0 0 #FFFFFF; margin:0 auto;...


css абсолютная позиция не будет работать с margin-left:auto margin-right: auto

Допустим, к тегу div применяется следующий параметр css .divtagABS { position: absolute; margin-left: auto; margin-right:auto; } маржа-левая и маржа-правая не вступают в силу но если у вас есть...


CSS центр фонового изображения отличается от margin:0 авто с полосами прокрутки

Взгляните на http://jsfiddle.net/7zb6P/1 / Как желтое поле , так и фоновое изображение центрируются в прокрутке div , хотя их центр немного отличается. Это, по-видимому, связано с тем, что фон...


центрирование изображения не работает с margin:0 auto

<div class=imgw> <img src=http://placehold.it/100x100/> </div> .imgw{ margin: 0 auto 0 auto; } img{ margin: 0 auto 0 auto; } не работает с текстом-выравнивание, проверено. Я...


css: margin 0 авто работает в IE8, но не в chrome

Мой css здесь (Ссылка Fiddle) . <div id=yearDiv> <ul> <li><a href=#>2014</a></li> <li><a href=#>2012</a></li> <li><a...


Почему центрирование с полем 0 auto работает с display:block, но не работает с display:inline-block ?

Просто быстрый вопрос, который не давал мне покоя: почему центрирование с margin:0 auto отлично работает с display:block но не центрирует div, когда дисплей установлен на display:inline-block...


Почему margin: 0, auto; не работает?

Почему этот центр не имеет #block1 и #block2 ?

<div>
    <div>
        a
        <div>
            pippo
        </div>
        <div>
            pluto
        </div>
    </div>
</div>
div#superwrapper {
    width:100%;
    height:210px;
    background-color:#FFFFCC;
    border:dotted;
}

div#wrapper {
    text-align:left;
    width:500px;
    heigth:205px;
    margin:0,auto;
    border:dotted;
}

div#block1 {
    text-align:left;
    float:left;
    width:200px;
    height:200px;
    border:dotted;
}

div#block2 {
    text-align:left;
    float:left;
    width:200px;
    height:200px;
    border:dotted;
}
css

Поделиться Источник Massimo Ivaldi     20 августа 2012 в 22:03

5 Ответов



6

margin: 0, auto;

Запятая здесь не является правильным синтаксисом. Это должно быть просто пространство:

margin: 0 auto;

Кроме того, как указывает @BillyMoat, heigth должно быть height .

Поделиться Ry-     20 августа 2012 в 22:06



0

div#wrapper {
    text-align:left;
    width:500px;
    heigth:205px;
    margin:0 auto;
    border:dotted;
}

Поделиться encodi.fm     20 августа 2012 в 22:07



0

Вам нужно объявить doctype в начале документа.

<!DOCTYPE html>

Поделиться JanHocevar     20 августа 2012 в 23:41



0

Я думаю, что вы пропустили единицы для маржи. Попробуйте что-то вроде:

margin: 0px auto;

Поделиться Peter Wippermann     21 августа 2012 в 15:06



0

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

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

Мое решение заключается в следующем: используйте float:right; для блока2. Затем добавьте поля для блоков 1 и 2. Поскольку все блоки используют фиксированную ширину, можно рассчитать, что левое (block1) и правое (block2) поля должны быть установлены в 33px. Граница занимает пару пикселей (по умолчанию = средний; не удалось узнать, сколько пикселей используется для среднего). В конце концов, это выглядит как 27px вполне нормально.

Вот код:

div#superwrapper {
width:100%;
height:210px;
background-color:#FFFFCC;
border:dotted;
}

div#wrapper {
text-align:left;
width:500px;
height:205px;
margin:0 auto;
border:dotted;
}

div#block1 {
text-align:left;
float:left;
width:200px;
height:200px;
border:dotted;
margin: 0 0 0 27px;
}

div#block2 {
text-align:left;
float:right; 
width:200px;
height:200px;
border:dotted;
margin: 0 27px 0 0;
}

Надеюсь, что это помогает и делает трюк?

Поделиться odermata     21 августа 2012 в 21:06



Центрирование div, margin: 0 auto; не работает

После поиска в центре моего div все, что я мог получить, было margin: 0 auto; вместе с назначенной шириной, но все равно это не работает. Моя проблема-просто центрировать div. Я понятия не имею,...


Почему "margin: 1 auto;" не работает?

Почему margin: 0 auto; работает, а margin: 1 auto; -нет? Есть ли какой-то хитрый способ просто исправить это? .container { width: 220px; /* margin: 0 auto; */ /* <-- works.*/ margin: 1 auto;...


центрирование изображения не работает с margin:0 auto

<div class=imgw> <img src=http://placehold.it/100x100/> </div> .imgw{ margin: 0 auto 0 auto; } img{ margin: 0 auto 0 auto; } не работает с текстом-выравнивание, проверено. Я...


Почему margin:0 auto не выравнивается по центру

Несколько раз я сталкиваюсь с этой проблемой. Всякий раз, когда я пытаюсь центрировать что-то с помощью margin:0 auto. Иногда мне это удается, а иногда нет. Таковы мои вопросы. Почему #PostWrapper в...


Почему margin: auto; не работает?

Несмотря на то, что я добавил margin: auto; к классу .content, который на самом деле является содержимым модала, он по-прежнему позиционирует себя в левом верхнем углу. Почему это происходит? Как я...


CSS Margin: 0 Auto; не работает с тегом _26

Мой markup прост, и я использую встроенный CSS. Моя цель-получить изображение, центрированное с помощью margin: 0 auto; в атрибуте style HTML. Вот код, который я попробовал: <div style=width:...


"margin: 0 auto" не работает, когда ширина определена

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


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

Вот html и css в фрагменте кода: * { margin: 0; padding: 0; } html, body { height: 100%; width: 100%; } header { height: 100px; background-color: #35424a; border-bottom: #e8491d 5px solid; } h2 {...


margin 0 auto центрирует элемент, Почему же margin 1 auto не делает то же самое?

Я понимаю, что margin: 0 auto; означает поле размером 0 в верхней и нижней части элемента, а также поле размером все, что доступно, разделенное поровну, слева и справа от элемента. Это работает так,...


Горизонтально центрируя изображение внутри _26, почему margin:0 auto; NOT работает?

- 33 здесь. OR #left-control { float: left; height: 300px; width:300px; background-color:crimson; } #left-control:before { content: ; display: inline-block; vertical-align: middle; height: 100%; }...


"margin: 0 auto" не работает, когда ширина определена

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

HTML:

<div>
        <div>
           <input type="text" name="searchfield" placeholder="Search Item">

CSS:

.searchbox {
  position: absolute;
  width: 100%;
  overflow: hidden;
  left: 0%;
  top: 55px;
  height: 350px;
  background-color: black;
}
.mover {
  display: block;
  z-index: 2;
  background-color: white;
  margin: 0 auto;
  width: 70%;
  height: 100%;
  min-width: 600px;
  height: 250px;
}
.search {
  position: relative;
  width: 70%;
  height: 35px;
  top: 100px;
  margin: 0 auto;
  border: solid 1px black;
  border-radius: 7px;
}
.search[type=text] {
  color: black;
  text-align: center;
  font-family: 'Lato';
  font-size: 15px;
}

Обратите внимание, что я не хочу width: 100% для элемента поиска, как вы видите в коде, у меня есть min-width: 600px определено, что для других элементов в движителе, который не имеет отношения в этом случае.

Пожалуйста, проверьте, Fiddle

В чем может быть проблема? Я определил ширину на обоих элементах, но margin auto все еще не работает, есть ли способ исправить это?

html css

Поделиться Источник ShellRox     29 января 2017 в 20:40

1 Ответ



3

<input> является элементом встроенного уровня, margin: auto трюков работает только для элементов уровня блока.

Вы можете сделать:

.search {
  ...
  width: 70%;
  margin: 0 auto;
  display: block; /*add this line*/
}

Или, если вы предпочитаете оставить его как встроенный вы можете сделать:

.mover {
  text-align: center;
}

Поделиться Stickers     29 января 2017 в 20:45



Центрирование div, margin: 0 auto; не работает

После поиска в центре моего div все, что я мог получить, было margin: 0 auto; вместе с назначенной шириной, но все равно это не работает. Моя проблема-просто центрировать div. Я понятия не имею,...


центрирование изображения не работает с margin:0 auto

<div class=imgw> <img src=http://placehold.it/100x100/> </div> .imgw{ margin: 0 auto 0 auto; } img{ margin: 0 auto 0 auto; } не работает с текстом-выравнивание, проверено. Я...


margin: auto не центрирует мой div, даже если задана ширина

Ладно, это меня раздражает, потому что это такая маленькая проблема, но, очевидно, я не могу заставить ее работать. Я делаю отзывчивый / текучий сайт. Вот это HTML: <div id=Wrapper> <div...


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

Вот html и css в фрагменте кода: * { margin: 0; padding: 0; } html, body { height: 100%; width: 100%; } header { height: 100px; background-color: #35424a; border-bottom: #e8491d 5px solid; } h2 {...


Каково обоснование margin-top: auto и margin-bottom: auto, составляющее 0 margin?

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


Нужна ли ширина при центрировании div с помощью margin auto?

Я попытался центрировать свой div, используя margin: auto, как это: #main-container #control-panel {margin: 10px auto;} Но он по-прежнему выравнивается влево. Я обнаружил, что мне нужно указать...


Margin 0 auto для диапазона в div не работает

Я бы назвал промежуток в div, его принимая поля, но margin:0 auto не работает. Есть предложения? html <div> <span> <h4>Paris Eurostar Breaks</h4> <p>Curabitur fringilla...


Не могу поставить div в центр (margin:0 auto; не работает)

Я хочу поставить div в центре (горизонтально). В то же время, я хочу поставить этот div margin-top:40px и margin-bottom:20px. Но как только я назначил margin:0 auto, margin-top и bottom не работает....


margin 0 auto центрирует элемент, Почему же margin 1 auto не делает то же самое?

Я понимаю, что margin: 0 auto; означает поле размером 0 в верхней и нижней части элемента, а также поле размером все, что доступно, разделенное поровну, слева и справа от элемента. Это работает так,...


Почему "margin: 1 auto;" не работает?

Почему margin: 0 auto; работает, а margin: 1 auto; -нет? Есть ли какой-то хитрый способ просто исправить это? .container { width: 220px; /* margin: 0 auto; */ /* <-- works.*/ margin: 1 auto;...


Центрирование div, margin: 0 auto; не работает

После поиска в центре моего div все, что я мог получить, было margin: 0 auto; вместе с назначенной шириной, но все равно это не работает.

Моя проблема-просто центрировать div. Я понятия не имею, почему margin: 0 auto; не работает.

Вот макет моего CSS/html:

CSS

    .countdown-box {
       position: absolute;
       width: 80px;
       margin: 0 auto;
       height: 130px;
       /*left: 50%;*/
       background: #008040;
       border-radius: 4px;
       z-index: 2;
    }
<div></div>
html css

Поделиться Источник Ojay     13 марта 2019 в 01:47

3 Ответа



5

Это потому, что вы используете position: absolute; . Измените его на position: relative; , и он будет работать.

Поделиться focorner     13 марта 2019 в 02:00



3

Поле : авто работает с элементами с относительным положением. Для центра с абсолютным положением должно быть примерно следующее CSS:

    .countdown-box {
        position: absolute;
        background: #008040;
        border-radius: 4px;
        height: 130px;
        width: 80px;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }
<div></div>

Поделиться zesak     13 марта 2019 в 02:01



1

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

<div></div>


.centerize {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  background: yellow;
}

Поделиться huan feng     13 марта 2019 в 02:36



центрирование изображения не работает с margin:0 auto

<div class=imgw> <img src=http://placehold.it/100x100/> </div> .imgw{ margin: 0 auto 0 auto; } img{ margin: 0 auto 0 auto; } не работает с текстом-выравнивание, проверено. Я...


Почему центрирование с полем 0 auto работает с display:block, но не работает с display:inline-block ?

Просто быстрый вопрос, который не давал мне покоя: почему центрирование с margin:0 auto отлично работает с display:block но не центрирует div, когда дисплей установлен на display:inline-block...


Margin 0 auto для диапазона в div не работает

Я бы назвал промежуток в div, его принимая поля, но margin:0 auto не работает. Есть предложения? html <div> <span> <h4>Paris Eurostar Breaks</h4> <p>Curabitur fringilla...


Не могу поставить div в центр (margin:0 auto; не работает)

Я хочу поставить div в центре (горизонтально). В то же время, я хочу поставить этот div margin-top:40px и margin-bottom:20px. Но как только я назначил margin:0 auto, margin-top и bottom не работает....


Margin 0 auto не работает в div с ячейкой display:table

Я работаю над страницей.. где Margin 0 auto не работает в div с ячейкой display:table вот мой код CSS стили <style> html,body{ height:100%; width:100%; } .wrapper{ background-color:#999;...


Центрирование <div> без использования " margin: auto;"

Я ищу способ центрировать div горизонтально на странице в Google Chrome. Я пробовал использовать margin: auto; но я читал, что эта функция не поддерживается в Google Chrome. В результате мой div...


Центрирование div фиксированной ширины с CSS с помощью margin:0 auto; не эффективно

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


"margin: 0 auto" не работает, когда ширина определена

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


Почему margin: 0, auto; не работает?

Почему этот центр не имеет #block1 и #block2 ? <div id=superwrapper> <div id=wrapper> a <div id=block1> pippo </div> <div id=block2> pluto </div> </div>...


CSS центрирование margin:0 авто, не работает

У меня проблема с margin:0 auto; я уверен, что решение простое, но я просто делаю что-то неправильно. Это мой первый сайт, который я создаю самостоятельно, и у меня возникли некоторые проблемы с...


css margin:0 авто не работает в firefox

Пожалуйста, посмотрите на ссылку ниже в разных браузерах.
http://www.bayaneqalam.com
Нижний слайдер логотипа расположен в центре страницы в Chrome и IE. Но это в правой стороне, в Firefox. Для чего эта проблема ?
Я использовал carouFredSel для этого слайдера.

css slider margin center caroufredsel

Поделиться Источник Mohammad Saberi     25 января 2014 в 20:13

1 Ответ



1

Вы проверили примененные стили на Firebug? Есть некоторые встроенные стили, добавленные к элементу .caroufredsel_wrapper , который в некоторых случаях не имеет никакого смысла.

Кстати, в стилях нет объявления margin: 0 auto; CSS. Вот что я получил от Firebug:

element.style {
    bottom: auto;
    display: block;
    float: none;
    height: 100px;
    left: auto;
    margin: 0;        /* <-- the margins of all 4 aspects have been set to 0  */
    overflow: hidden;
    position: relative;
    right: auto;
    text-align: center;
    top: auto;
    width: 740px;
    z-index: auto;
}

IMO, вы можете применить margin к элементу где-то в вашем файле CSS и убедиться, что он переопределяет встроенный стиль, как показано ниже:

.caroufredsel_wrapper {
    margin: 0 auto !important;
}

Поделиться Hashem Qolami     25 января 2014 в 21:11



margin:0 авто не работает в интернете explorer

margin:0 auto не работает в internet explorer. Он хорошо работает в firefox. Пожалуйста, проверьте сайт http://jobslanda.com / #Body{ background: none repeat scroll 0 0 #FFFFFF; margin:0 auto;...


CSS центрирование margin:0 авто, не работает

У меня проблема с margin:0 auto; я уверен, что решение простое, но я просто делаю что-то неправильно. Это мой первый сайт, который я создаю самостоятельно, и у меня возникли некоторые проблемы с...


получить margin-left с помощью jquery не работает в firefox

Приведенный ниже код отлично работает в chrome, но не в firefox. предупреждение показывает правильный запас в chrome, в то время как в firefox он всегда показывает 0px . HTML: <div...


Почему не работает margin:0 авто?CSS

Я попытался выровнять центр этих элементов на странице контактов. http://avocat.dac-proiect.ro/wp/?помощью page_id=19 .contactform11 .wdform_section.{ /* margin-left:280px; */ /* margin-top:55px; */...


CSS margin:0 авто не работает на li>a

Я хочу, чтобы панель навигации с ее элементами (li>a) была посередине. Я добился только стиля float left. #wrapper { width: 900px; margin: 0 auto; } li { float: left; } ul>li>a { display:...


css margin-top не совпадает в Firefox и Chrome

У меня есть div с этим css стилем, как показано ниже: //Search .input-append{ text-align:right; margin-left:-35px; height:20px; margin-top:-15px!important; input[class*=span]{ margin:-2px 0 0 0;...


css: margin 0 авто работает в IE8, но не в chrome

Мой css здесь (Ссылка Fiddle) . <div id=yearDiv> <ul> <li><a href=#>2014</a></li> <li><a href=#>2012</a></li> <li><a...


css абсолютная позиция не будет работать с margin-left:auto margin-right: auto

Допустим, к тегу div применяется следующий параметр css .divtagABS { position: absolute; margin-left: auto; margin-right:auto; } маржа-левая и маржа-правая не вступают в силу но если у вас есть...


CSS не работает в Chrome и не в firefox

CSS не работает в Chrome и не в firefox Оригинальный CSS background: url(../images/shortcut-button-bg.gif) no-repeat scroll left top #F7F7F7; border: 1px solid green; display: -moz-inline-stack;...


CSS фон URL не работает в Firefox

Пожалуйста, объясните мне, почему это не работает в FireFox <img class=icon-expand /> CSS .icon-expand { background: url('../images/expand-plus-icon-24.png') no-repeat; height: 24px; width:...


Почему "margin: 1 auto;" не работает?

Почему margin: 0 auto; работает, а margin: 1 auto; -нет? Есть ли какой-то хитрый способ просто исправить это?

      .container {
       width: 220px;
       /* margin: 0 auto; */ /* <-- works.*/
       margin: 1 auto; /*<-- error. HOW TO FIX??? */
       padding: 16px;
       display: block;
       border: 2px solid black;
      }
<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint non cumque at minima voluptates totam suscipit, esse vitae recusandae fugit, alias quibusdam odio sunt iure velit, perferendis voluptas ratione quo!</p>
</div>

извините за глупый вопрос UPD: я уверен, что этот ответ будет полезен для поисковиков, которые имеют подобные проблемы, plz не удаляют.

css

Поделиться Источник ieXcept     29 августа 2016 в 00:16

3 Ответа



4

Поскольку 0 является универсальным, 1, однако, зависит от единицы измерения, и поскольку ни одна единица измерения не указана, браузер не знает, что делать.

Поделиться php_nub_qq     29 августа 2016 в 00:18



1

Потому что свойства margin-* принимают только длины, проценты и auto . Не целые числа.

Свойства, определенные в этом разделе, относятся к типу значений <margin-width> , который может принимать одно из следующих значений:

  • <length> : задает фиксированную ширину.
  • <percentage> : процент рассчитывается по отношению к ширина сгенерированного блока, содержащего поле.
  • auto

Тогда 0 работает, потому что это допустимая длина , а 1 -нет.

Формат значения длины (обозначается в этом случае как <length> спецификация) - это <number> (с десятичной запятой или без нее) сразу же за ним следует идентификатор объекта (например, px, em и т. д.). После нулевая длина, идентификатор единицы измерения является необязательным.

Он будет действителен, если вы добавите какую-то единицу , например 1px , 1cm , 1em, 1vh или что-то еще.

Поэтому ваше заявление игнорируется :

Агенты пользователей должны игнорировать объявление с недопустимым значением.

Поделиться Oriol     29 августа 2016 в 00:18



1

0 само по себе просто означает 0, но все, что больше или меньше, нуждается в единице. Вы не можете сказать 1 и ожидать length/size/etc.

0 означает нет и является допустимым. 1 сам по себе не имеет единицы измерения и CSS ничего не предполагает.

padding: 0px; /* px is redundant here because 0 means none */

padding: 1; /* error, what is 1? 1 cm? 1 em? */

Поделиться Li357     29 августа 2016 в 00:19



Почему margin: auto; не работает?

Несмотря на то, что я добавил margin: auto; к классу .content, который на самом деле является содержимым модала, он по-прежнему позиционирует себя в левом верхнем углу. Почему это происходит? Как я...


Почему мой margin:10px auto; не работает?

По какой-то причине мой родительский div ( #box_one ) центрируется на моей странице отлично, используя ( #box_one{ margin: 10px auto 10px auto; } ), но когда я пытаюсь использовать ту же технику для...


Центрирование div, margin: 0 auto; не работает

После поиска в центре моего div все, что я мог получить, было margin: 0 auto; вместе с назначенной шириной, но все равно это не работает. Моя проблема-просто центрировать div. Я понятия не имею,...


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

Вот html и css в фрагменте кода: * { margin: 0; padding: 0; } html, body { height: 100%; width: 100%; } header { height: 100px; background-color: #35424a; border-bottom: #e8491d 5px solid; } h2 {...


{margin: 0px auto;} не центрирующий div

Пожалуйста, взгляните на https://jsfiddle.net/p1ys5yj3/1 / Я пытаюсь центрировать то, что выделено красным .question{ } в центре страницы с margin: 0px auto; , но это не работает. margin-left: вроде...


margin 0 auto центрирует элемент, Почему же margin 1 auto не делает то же самое?

Я понимаю, что margin: 0 auto; означает поле размером 0 в верхней и нижней части элемента, а также поле размером все, что доступно, разделенное поровну, слева и справа от элемента. Это работает так,...


Почему margin: 0, auto; не работает?

Почему этот центр не имеет #block1 и #block2 ? <div id=superwrapper> <div id=wrapper> a <div id=block1> pippo </div> <div id=block2> pluto </div> </div>...


Центрирование сечения с помощью margin auto не работает

У меня есть 3 секции, 1-поплавок слева, а второй-поплавок справа на той же линии. Я хочу, чтобы третий блок секции был центрирован ниже остальных 2. Я могу направить его влево или вправо и добавить...


Почему margin auto работает для left/right и не работает для top/bottom?

Я всегда хотел знать, почему я могу использовать margin auto для левого / правого горизонтального центра div, а не для вертикального центра. Здесь я хотел бы вертикально центрировать:...


Почему "margin: auto" не центрирует элемент вертикально?

Как вы можете видеть в демо ниже, margin: auto; центрирует синий div горизонтально, но не вертикально. Почему бы и нет? .box { border: 1px solid red; width: 100px; height: 100px; } .center {...


Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *