Question

我正在使用Materialise CSS而我正试图将div放在中心位置。我试图让白盒子以移动和桌面为中心到页面中心。所有白框都在同一个div中，名为root。

的index.html

 <body>
    <div class="container">

       <div id="mainContent" class="row">

          <div id="root" class="col s12 xl l6"></div>

       </div>
    </div>
 </body>

styles.css的

#mainContent {
    background-color: blue;
    margin: auto;
    display: block;
}

#root {
    margin: 0 auto;
    position: relative;
}

在移动设备上，它正确地将白框对中。

在桌面上，框位于左侧。

如果我将margin-left添加到.root{}，那么它不会以移动版本为中心。

Answer 1

我认为最好的方法是在列上使用grid offsets：

<body>
    <div class="container">
        <div id="mainContent" class="row">
            <div class="col s12 l6 offset-l3"></div>
        </div>
    </div>
</body>

添加班级offset-l3会在屏幕尺寸l和xl左侧添加3列的偏移量。总共12列，内容为6列，偏移量为3将导致内容居中。

style.css可以更新为仅设置background-color：

#mainContent {
    background-color: blue;
}

Answer 2

我为index.html添加了一个包装器，如此

xmllint

现在白色盒子在两个较小的重塑显示器中间居中，并且更大。

如何使用materialize将元素置于大型显示中心？

2 个答案:

如何使用materialize将元素置于大型显示​​中心？

2 个答案:

如何使用materialize将元素置于大型显示中心？