当 flexbox 和经典技术不起作用时居中行内块元素

Question

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

它们都是 class.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

你搞错了。你的行内块元素有 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 中删除左侧和宽度，使其仅根据其子项展开，然后放置 margin:0 auto；到#smallContainer。这样，即使视口发生变化，您也可以确保 .small div 居中。

编辑

我更新了 fiddle，我刚刚删除了 display:inline-块；来自 css.

中的 .small

朋友，如果它能满足您的需求，请不要忘记将其标记为答案:)

当 flexbox 和经典技术不起作用时居中行内块元素

centering inline-block elements when flexbox and classic techniques don't work

html

css

centering