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

Question

在这里的页面: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%;
}

我也text-align:center;想过,因为它们是我可以在.small元素上使用的内联块元素,但是这不起作用.

#small{
   text-align:center;
}

我似乎无法弄清楚如何将3个小圆圈居中,以便中间的一个在垂直中间,就像更大的圆圈(.big),我用第二种技术集中.

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

Answer 1

你可以试试这个:

HTML:

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

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

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

CSS:

#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;
}

在这里小提琴

我做的很简单..只需将#main和#smallContainer位置相对,从#smallContainer中删除左边和宽度,使其仅根据其子项展开,然后将margin:0 auto; 到#smallContainer.这样即使视口改变,你也确定.small div是居中的.

编辑

我更新了小提琴,我刚删除了显示:inline-block; 来自CSS中的.small.

不要忘记将此标记为答案,如果它给你你需要我的朋友:)