CODEWITHSUNDEEP
htmlcss
ap.singh
ap.singh

Reputation: 1160

Center Child dynamic divs

I have to centered the div horizontally. cont1 div is parent div . it will take the width of device. and cont2 is child div it will take the width according to its content. and the number of child div is dynamic . all the divs are centered perfectly . But the issue is with last div. I want the last div at left side. I have tried lots of techniques. But unable to fix that .

I dont want to use javascript or jquery .

Here is fiddle link Fiddle link

Here is html 

<div class="cont1">
    <div class="cont2">
        <div class="child">  </div>
          <div class="child">  </div>
          <div class="child">  </div>
          <div class="child">  </div>
          <div class="child">  </div>
          <div class="child">  </div>
          <div class="child">  </div>
          <div class="child">  </div>
          <div class="child">  </div>
         <div class="child">  </div>

    </div>
</div>

Here is Css 

.cont1 {
    background-color: #e6e6e6;
    height: auto;
    margin: 0 auto;
    min-width: 600px;
    position: relative;
    text-align: center;
    width: 840px;
}
.cont2 {
    display: inline;
    text-align: left;
}
.child{
     display: inline-block;
    margin: 4px;
    max-width: 230px;
    width: 30%;
height:100px;
    background-color:red;
}

Upvotes: 2

Views: 49

Answers (2)

Alan Dunning
Alan Dunning

Reputation: 1351

Put the text-align: center; from .cont1 and replace the text-align: left on .cont2 with it.

.cont1 {
background-color: #e6e6e6;
height: auto;
margin: 0 auto;
min-width: 600px;
position: relative;
width: 840px;
}

.cont2 {
    display: inline;
    text-align: center;
    width: 90%;
    margin: 0 auto;
}

UPDATED FIDDLE LINK

Upvotes: 0

4dgaurav
4dgaurav

Reputation: 11506

Demo

css

.cont1 {
    background-color: #e6e6e6;
    height: auto;
    margin: 0 auto;
    min-width: 600px;
    position: relative;
    width: 840px;
    text-align: left; /* make it left */
}

.cont2 {
    /* display: inline; remove this */
    max-width:600px; /* add this */
    margin:auto; /* add this */
}

Upvotes: 2

Related Questions