当 flexbox 和经典技术不起作用时，居中 inline-block 元素

Question

在页面here: https://irfan.io

我已经尝试过以我能想到的各种方式将较小的圆圈居中，但它们要么没有居中，要么居中没有响应——这意味着当视口改变时它会失败。

它们都是 .small 类，它们是 #main 的子级。

我已经尝试过 flexbox：

#main{
    display:flex;
    align-items:center;
    justify-content:center;
}
.small{
    display:flex;
}

我尝试将 .small 元素包装在一个容器中，并给它一个固定的宽度并以宽度的 -0.5 为中心：

#smallContainer{
    width:500px;
    margin-left:-250px;
    position:relative;
    left:50%;
}

我还认为，由于它们是内联块元素，我可以在 .small 元素上使用 text-align:center;，但这不起作用。

#small{
   text-align:center;
}

我似乎无法弄清楚如何将 3 个小圆圈居中，以使中间的圆圈像大圆圈 (.big) 一样位于垂直中间，我使用第二种技术将其居中。

有人对如何做到这一点有任何想法吗？

Answer 1

你错了。您的 inline-block 元素的左侧为 50%（即使您将居中，右侧还有 50%）。

你可以这样解决：

#smallContainer { text-align: center; }
.small { left: 0; }

Answer 2

你可以试试这个：

演示：

#main{
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
}
.small{
    display:flex;.
    text-align:center;
    display:inline-block;
    width:100px;
    height:100px;
    border:1px solid black;
}
#smallContainer{
    margin-left:0 auto;
    position:relative;
}

<div id="main">
    <div id="smallContainer">
        <div class="small">
            text
        </div>       

        <div class="small">
            text
        </div>       

        <div class="small">
            text
        </div>       
    </div>
</div>

fiddle here

我所做的很简单..只需使#main 和#smallContainer 位置相对，从#smallContainer 中删除left 和width 使其仅根据其子项扩展，然后放置margin:0 auto;到#smallContainer。这样，即使视口发生变化，您也可以确定 .small div 居中。

编辑

我更新了小提琴，我刚刚删除了 display:inline-block;来自 css 中的 .small。

如果它给了你你需要的东西，不要忘记把它标记为答案，我的朋友 :)