'margin:auto;`不适用于内联块元素 [英] `margin:auto;` doesn't work on inline-block elements

问题描述

我给了margin:auto;一个容器" div.

只要我给它指定了width，它就可以正常工作，但是现在我将其更改为inline-block，而margin:auto;停止了工作

It worked fine as long as I gave it a specific width, but now I changed it to inline-block and margin:auto; stopped working

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

<div class="center MtopBig" id="container"></div>

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

<div class="center MtopBig" id="container"></div>

DEMO小提琴.

推荐答案

它不再居中，因为它现在以与inline元素相同的方式在页面上流动(非常类似于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.

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

<div class="center">
    <div class="MtopBig" id="container"></div>
</div>

这篇关于'margin:auto;`不适用于内联块元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！