Question

我使用insTabsContainer使内部div margin: 0 auto居中，但它并没有成为中心。你们能告诉我这里我做错了什么吗？

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>

Answer 1

你可以使用flex。对此。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

如果您使用

margin: 0  auto;

它应该有一个宽度，但你可以简单地使用

显示：表;

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

Answer 3

您应该设置宽度以便查看它的中心位置：

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

Answer 4

您可以使用flex-box

来实现此目的

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

内部div没有得到中心

4 个答案: