html - 在父级内水平居中

Question

在此页面上，我显示了出现在音乐节上的艺术家列表。艺术家<div>的位置由同位素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>

Twitter 指南中的引导网格

引导文本教程

引导视频教程

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>

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