Маржа: авто; с встроенным блоком

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

предыдущий css

#container {
    border: 1px solid black;
    height: 500px;
    width: 650px;
}
.MtopBig {
    margin-top: 75px;
}
.center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

новый css

#container {
    border: 1px solid black;
    display: inline-block;
    padding: 50px;
}
.MtopBig {
    margin: 75px auto;
    position: relative;
}
.center {
    text-align: center;
}

DEMO fiddle.

Ответы

Ответ 1

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

http://jsfiddle.net/ca3QS/

Ответ 2

Что означает "auto":

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

Ответ 3

Для элементов со свойством display: inline-block; Вычисленное значение "auto" для "margin-left" или "margin-right" становится используемым значением "0".