html - 在父级内水平居中

Question

关于 this page我展示了出现在音乐节上的艺术家名单。艺术家的安置<div> s 由 isotope 控制(当有大量艺术家并且艺术家 div 的高度不同时，单独使用 CSS 很难让所有内容正确排列)。

无论如何，我想将艺术家 div 在其父容器中居中，以便艺术家的左右两侧有相等数量的空白，如下图所示。

我已经尝试了所有显而易见的事情，例如:

margin: 0 auto
text-align: center

但到目前为止还没有运气....

Answer 1

parent 必须有

text-align:center; width:abc;

和一定的宽度。那么 child 应该有

margin:auto; text-align:left; width:xyz;

例子:

<div style="width:100%; text-align:center;">
    <div style="width:50%; text-align:left; background:red; margin:auto;">
        This will do it just right
    </div>
</div>

如果这不起作用，您真的应该检查是否有其他因素影响了该行为!