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

Question

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

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

他们都是 .small 类，他们是#main 的 child 。

我试过 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%;
}

我还认为，因为它们是行内 block 元素，所以我可以在 .small 元素上使用 text-align:center;，但这没有用。

#small{
   text-align:center;
}

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

有没有人知道如何做到这一点？

Answer 1

你错了。你的行内 block 元素有 50% 的左边(即使你居中，右边也有 50%)。

你可以这样解决:

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