margin：auto;与inline-block [英] margin:auto; with inline-block

问题描述

我有一个container div ，我给了 margin：auto; 我给它一个特定的宽度，但现在我改为 inline-block 和 ：auto; isnt工作

i have a "container" div to which i gave margin:auto; which worked fine as long as i gave it a specific width, but now i changed it to inline-block and margin:auto; isnt working

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

new css

new css

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

DEMO小提琴。

推荐答案

它不再居中，因为它现在流在页面上同样的方式 inline 元素do（非常类似于 img 元素）。您必须 text-align：center 包含元素才能使 inline-block div 。

It is no longer centered because it now flows on the page in the same way inline elements do (very similarly to img elements). You will have to text-align: center the containing element to center the inline-block div.

http://jsfiddle.net/ca3QS /

这篇关于margin：auto;与inline-block的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！