在父母中水平居中

Question

在this page上，我展示了一个出现在音乐节上的艺术家名单。艺术家<div>的位置由isotope控制（当有大量艺术家和艺术家div时，很难单独使用CSS来获取所有内容。是不同的高度。）

无论如何，我想将艺术家div放在他们的父容器中心，以便艺术家的左右两侧有相同数量的空白区域，如下图所示。

我已经尝试过所有明显的事情：

margin: 0 auto
text-align: center

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

Answer 1

您是否尝试使用类似引导网格的东西？ 它会让你的生活变得更加轻松。

您只需定义一个容器，引导网格将为您完成所有繁重的工作。 包括适应各种设备：）

<!-- simple three column display that will take seconds to create -->
<div class="container">
  <div class="row">
    <div class="span4">/div>
    <div class="span4">/div>
    <div class="span4"></div>
 </div>

Bootstrap Grid from Twitter Guide

Bootstrap Text Tutorial

Bootstrap Video Tutorial

Answer 2

父母必须

text-align:center; width:abc;

并且有一定的宽度。然后孩子应该

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>

如果这不起作用，你应该检查是否有其他因素会影响行为！