Question

中

我尝试过每个我能想到的小圆圈居中，他们要么不居中，要么居中没有响应 - 这意味着当视口改变时它会失败。

他们都是班级.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

你可以试试这个：

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

fiddle here

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

修改

我更新了小提琴，我刚删除了显示：inline-block;来自css的.small。

如果它能为您提供您需要的朋友，请不要忘记将其标记为答案：）

Answer 2

你有一个错误。您的内联块元素的左边为50％（即使您将居中，右侧也会增加50％）。

你可以这样解决：

<div>
  <form>
    <input type="text" name="text1">
    <input type="text" name="text2">
    <input type="password" name="password1">
    <input type="password" name="password2">
  </form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

当flexbox和经典技术不起作用时，将内联块元素集中在一起

2 个答案: