Question

我尝试将div放在另一个div中。我看到了Manoj Kumar对此question的回应。但它没有用。

<div class="row">
  <div class="col-sm-9">
    <div class="contAin">
        <div class="tile">Some Content</div>
    </div>
</div>
</div>

和css

.tile {
  margin-bottom: 30px;  
  width: 80%;
}

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

内部div正好与左边对齐。

Answer 1

删除display: flex，而不是.tile使用此CSS规则：

.tile {
  width: 80%;
  margin: 0 auto 30px;
}

<强>段

＆＃13;

.tile {
  margin: 0 auto 30px;  
  width: 80%;
}

＆＃13;

<div class="contAin">
    <div class="tile">Some Content</div>
</div>

＆＃13;

Answer 2

您可以将margin-left:auto和margin-right:auto添加到同一个css类并进行检查。

因此，CSS变为：

.tile {
  margin-bottom: 30px;  
  width: 80%;
  margin-left:auto;
  margin-right:auto;
}

Answer 3

我在jsfiddle中尝试过，这是有效的 http://jsfiddle.net/say2vnxb/

.tile {
  margin-bottom: 30px;  
  width: 80%;
  background: yellow;
}

.contAin {
  display: flex;
  justify-content: center;
  border: 1px solid red;
}

您使用什么浏览器？

Answer 4

在CSS代码中尝试：

.tile  {margin-right: auto;margin-left: auto;}

将div元素居中于另一个div元素中

4 个答案: