绝对内部相对

Question

我使用Materialise CSS前端框架并使用margin：0 auto;就像我一直拥有的那样，并且梦魇让这个div在其父母中心。是什么给了什么？

＆＃13;

.outer {
  border: 1px solid red;
  height:100px;
}

.inner{
  border: 1px solid black;
  height:50px;
  margin: 0px auto;
}

＆＃13;

<!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">

  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>

<div class="container">
  <div class="row outer">
    <div class="col l6 inner">
    </div>
  </div>
  
</div>

＆＃13;

http://codepen.io/kinsdotnet/pen/mEYJVg

Answer 1

Materialise使用浮动元素的网格系统。您不能在浮动元素上使用margin: auto。

您需要从网格中使用偏移类，或者重新排列网格和子元素...

（http://codepen.io/jmsherry/pen/OXYVRL＆lt; - 喜欢那样）

另外，请不要听到重要和绝对定位的错误建议。有更好的方法来做到这一点......

Answer 2

绝对内部相对

将外部div的位置设置为relative，将内部设置为绝对。

要使margin: 0px auto有效，请添加left: 0; right:0;

你必须指定内部div的宽度。

如果你想垂直居中，

只需替换：

margin: 0px auto

使用：

margin: auto

结果：

.outer {
  border: 1px solid red;
  height:100px;
  position:relative;
}

.inner{
  border: 1px solid black;
  height:50px;
  margin: 0px auto;

  width:100px;
  position:absolute;
  left:0;
  right:0;
}

<!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">

  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>

<div class="container">
  <div class="row outer">
    <div class="col l6 inner">
    </div>
  </div>
  
</div>

Answer 3

尝试将此添加到您的内部类：

float:none !important;

看起来类col应用了一个浮动，这就是它不居中的原因

如何将div放在容器内的div中？

3 个答案:

绝对内部相对

结果：