Question

似乎有大量的CSS问题可用于搜索，但我没有设法找到任何可以回答我的问题，也没有任何解决方案可以解决这个问题。

我希望有一堆div，每行一个，在父容器中居中，并根据文本内容自动宽度。

我用display：inline-block管理的自动宽度部分，但最后我得到了彼此旁边的div（尽可能多地容纳在父容器中）。

有任何帮助吗？谢谢！

编辑：另外，我考虑过去Table路线，这是正确的做法（即一个包含多行的单列的表）

编辑：一个例子总是让事情更清楚......

我有一系列有一系列div的专栏：

<div id="giant-column" style="width: 800px; margin: 0 auto;">
  <div class="column-element" style="margin: 0 auto; display: inline-block;">
    <div class="text" style="width: 100%; clear: both;"> ... </div>
    <div class="author" style="float: right;"> ... </div>
  </div>
  ...
</div>

我希望每个“列元素”只能与“文本”一样宽，但是在较大的列“巨柱”中居中。这有意义吗？

Answer 1

div.column-element{
  margin: 0 auto;
}

Answer 2

你试过吗

margin:0 auto;

在你内心的div？

表设计不是那么敏捷，所以我们不认为它是一个很好的解决方案。无桌布设计有很多不同的选择。

Answer 3

哈！想出来......我需要另一个div元素，用宽度包裹每一行：100％;

<div id="giant-column" style="width: 800px; margin: 0 auto;">
  <div style="width: 100%;">
  <div class="column-element" style="margin: 0 auto; display: inline-block;">
    <div class="text" style="width: 100%; clear: both;"> ... </div>
    <div class="author" style="float: right;"> ... </div>
  </div>
  </div>
  ...
</div>

用于居中的自动宽度div元素的CSS，每行一个

3 个答案: