Css 我如何居中多个“；相对的；具有堆叠图像的div？

我想要一组横置的div，如下所示：

D0
---------------------------------------
|     ------ ------ ------ ------     |
|     |    | |    | |    | |    |     |
|     | D1 | | D2 | | D3 | | D4 |     |
|     |    | |    | |    | |    |     |
|     ------ ------ ------ ------     |
---------------------------------------

以D1为中心。我可以通过将D0设置为

文本对齐：居中

来完成此操作。（我不能使用margin:auto，因为我不知道D1-D4组合的宽度）

但是，D1到D4包含一组我想要覆盖的图像。我可以通过为D1设置

position:relative

，为img标签设置

position:absolute

---

问题是，这会导致D1-D4看起来没有内容，并且它们失去了使用文本对齐居中的能力：居中！是否有其他方法可以实现我想要的功能？

对于

d1、d2 d3和
d4
（以及
垂直对齐
）使用
显示：内联块
，并在父级上使用
文本对齐：居中

这些元素不需要相对定位
可能您正在使用
flot:left
属性进行divs，删除该属性，然后您可以使用
display:inline
进行divs，然后它将位于D0的中心
嘿，我想y现在可能是这样的

Css

HTML

<div class="d0">

    <div class="d1">D1</div>
    <div class="d2">D2</div>
    <div class="d3">D3</div>
    <div class="d4">D4</div>

</div>
​


D1
D2
D3
D4
​

现场演示

--------------------------------------------------
或者，如果您使用的是表而不是

这是d1
我是d2
这是d3
仅作确认-您不知道/无法设置任何D1-4元素的宽度？如果没有定位，我如何超级施加图像？这对于中心对齐不是必需的，但对于图像来说是可以的effect@Vanwaril-
display:inline block
使它们成为一个内联元素，这样
text align:center
就可以将其居中。@Derek，为什么不
display:inline
？因为这样会丢失
块的属性。例如：没有
转换
用于
内联
。如果我有D1-D4
浮点：左；显示：inline
，它们漂移到D0的最左边，而不是中间。@Vanwaril创建了一个固定大小的
（D0），然后使用
边距：0px auto
居中。
在HTML 4.01中不受欢迎，在HTML5中根本不受支持。不要用它@克里斯蒂安瓦尔加：嘿，你没有提到“HTML5需要代码”。HTML5是当前的标准，所以如果你在假设什么，你应该假设HTML5。无论如何，最好的实践和语义不应该因为“没有被提及”而被忽视。
<div class="d0">

    <div class="d1">D1</div>
    <div class="d2">D2</div>
    <div class="d3">D3</div>
    <div class="d4">D4</div>

</div>
​

<div id=d0 style="">
    <center><div id="dgroup" style="padding-top:10%;">
        <div id=d1 style="float:left;width=100px;height:180px">
              this is d1
        </div>

        <div id=d2 style="float:left;width=100px;height:180px">
              this is d2
        </div>

        <div id=d3 style="float:left;width=100px;height:180px">
              this is d3
        </div>

    </div></center>
</div>