Inner div not getting center

Question

I am centering inner div insTabsContainer using margin: 0 auto but it's not getting center. Will you guys tell me what's I did wrong here.

HTML

.insTabsContainer {
  margin: 0 auto;
}

.insTabs {
  position: relative;
  float: left;
  width: 32%;
  height: 25px;
  background-color: #E5E7E9;
  text-align: center;
  line-height: 20px;
  text-transform: uppercase; 
  font-size: 13px;
  color: #2C3E50;
  border-radius: 6px;
  margin-right: 5px;
  cursor: pointer;
}

<div class="col-sm-12">
  <div class="insTabsContainer">
    <div class="insTabs active">Text</div>
    <div class="insTabs">Text</div>
    <div class="insTabs">Text</div>
  </div>
</div>

@ManishPatel Just updated my code, mistakenly typed that here. But this thing is not an issue. — Jason, May 12 '18 at 11:23

score 1 · Accepted Answer · edited May 12 '18 at 11:51

you can use flex. for this.

.insTabsContainer {
    display: flex;
    justify-content: center;
}

.insTabs {
  position: relative;
  float: left;
  width: 25%;
  height: 25px;
  background-color: #E5E7E9;
  text-align: center;
  line-height: 20px;
  text-transform: uppercase; 
  font-size: 13px;
  color: #2C3E50;
  border-radius: 6px;
  margin-right: 5px;
  cursor: pointer;
}

.insTabs:last-child {
 margin-right:0;
}

<div class="col-sm-12">
  <div class="insTabsContainer">
    <div class="insTabs active">Text</div>
    <div class="insTabs">Text</div>
    <div class="insTabs">Text</div>
  </div>
</div>

score 0 · Answer 2 · answered May 12 '18 at 11:23

0

if you use

margin: 0  auto;

it should have a width, but you can use simply

display:table;

.insTabsContainer {
  display:table;
  margin: 0 auto;
}

answered May 12 '18 at 11:23

Lasantha

258
1
11

score 0 · Answer 3 · answered May 12 '18 at 11:24

0

You should set width in order to see that it's center:

.insTabsContainer {margin: 0 auto; width: 90%;}

answered May 12 '18 at 11:24

A. Meshu

4,053
2
20
34

score 0 · Answer 4 · answered May 12 '18 at 11:29

You can achieve this using flex-box

.insTabsContainer {
  
}
.insTabsContainer:after {
  content: "";
  display: table;
  clear: both;
}

.insTabs {
  position: relative;
  float: left;
  width: 10%;
  height: 25px;
  background-color: #E5E7E9;
  text-align: center;
  line-height: 20px;
  text-transform: uppercase; 
  font-size: 13px;
  color: #2C3E50;
  border-radius: 6px;
  margin-right: 5px;
  cursor: pointer;
}

.text-center {
  text-align: center;
}

.d-flex {
    display: flex;
    justify-content: center;
}

<div class="col-sm-12 text-center">
  <div class="insTabsContainer  d-flex">
    <div class="insTabs active">Text</div>
    <div class="insTabs">Text</div>
    <div class="insTabs">Text</div>
  </div>
</div>

Inner div not getting center

4 Answers4