Не работает 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; 
    }
 

Поделиться Источник 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>
    <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;
}

margin: 0, auto;

margin: 0 auto;

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

<!DOCTYPE html>

margin: 0px auto;

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;
}

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

.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;
}

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

.mover {
  text-align: center;
}

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

<div></div>

    .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>

<div></div>


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

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;
}

.caroufredsel_wrapper {
    margin: 0 auto !important;
}

      .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>

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

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