How do I center multiple "relative" divs with stacked images?

Question

I want a set of divs stacked sideways, like so:

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

Centered within D1. I can do this by setting D0 to text-align:center. (I cannot use margin:auto, since I don't know the width of D1 - D4 combined).

However, D1 through D4 contain a bunch of images I want to overlay. I can do this by setting position: relative for D1, and position:absolute for the img tags.

The issue is that this causes D1-D4 to seem like they have no content, and they lose their ability to center with text-align:center! Is there some other way to achieve what I want?

Answer 1

use display : inline-block for d1, d2 d3 and d4 (along with a vertical-align) and use text-align: center on the parent

Relative positioning is not necessary for those elements

Answer 2

Hey i think y may now as like this

Css

.d0{
    width:70%;
    background:green;
    text-align:center;
    margin:0 auto;
}

.d0 div{
    display:inline-block;
    margin:10px 0;
}

 .d1{
    background:yellow;
    position:relative;
}

 .d2{
    background:pink;
}


 .d3{
    background:darkred;
}


 .d4{
    background:lightblue;
}

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>
​

Live demo http://jsfiddle.net/rohitazad/qCtwp/

--------------------------------------------------

or if you used table than http://jsfiddle.net/rohitazad/qCtwp/1/