CODEWITHSUNDEEP
htmlcss
Reza Aria
Reza Aria

Reputation: 157

how put div center when use float

there is one div with width 100% inside it is another div with float left how can put it in center ? i try use margin 0 auto but its not work

http://jsfiddle.net/cterh0sv/

.test {
    width:100%;
    height:120px;
    background:green;
}

.inside {
    margin:0 auto;
    width:100px;
    height:100px;
    background:white;
    margin:10px;
    float:left;
}
<div class="test">
    <div class="inside">
    </div>
    <div class="inside">
    </div>
    <div class="inside">
    </div>
</div>

Upvotes: 2

Views: 76

Answers (1)

emmanuel
emmanuel

Reputation: 9615

You have to remove float, set text-align: center to container and display: inline-block to items.

.test {
  width: 100%;
  height: 120px;
  background: green;
  text-align: center;
}
.inside {
  width: 100px;
  height: 100px;
  background: white;
  margin: 10px;
  display: inline-block;
}
<div class="test">
  <div class="inside">
  </div>
  <div class="inside">
  </div>
  <div class="inside">
  </div>
</div>

Upvotes: 2

Related Questions