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