Geek asks and answers

How to center several "relative" sections with complex images?

I want the set of divs to fit sideways, for example:

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

It is centered inside D1. I can do this by setting D0 to text-align:center. (I cannot use margin: auto, since I do not know the widths D1 - D4 in combination).

However, D1-D4 contains a bunch of images that I want to overlay. I can do this by setting position: relativeboth D1 and position:absoluteimg tags.

The problem is that this leads to the fact that D1-D4 seems to have no content, and they lose their ability to center using text-align: center! Is there any other way to achieve what I want?

+3
source share
4 answers

display : inline-block d1, d2 d3 d4 ( vertical-align) text-align: center

+3

, ,

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/

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

, http://jsfiddle.net/rohitazad/qCtwp/1/

+1

Perhaps you are using a property flot:leftfor divs, remove this and you can use display:inlinefor div, then it will be in the center of D0

0
source 
<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>
-1
source

More articles:


All Articles