Question

我正在尝试学习如何使用Google材料设计指南制作响应式网络用户界面。在目前的所有材料设计实施中，我选择使用聚合物材料设计。

我不确定的是如何定位我的元素（/ components）在页面内。例如，我写了这个简单的主页

<div>
    <div horizontal center-justified layout>
        <div>
            <paper-button id="my" raised class="mainContentButton">Raised button</paper-button>
        </div>
        <div>
            <paper-button raised class="mainContentButton">Raised button</paper-button>
        </div>
    </div>
    <div horizontal center-justified layout>
        <div>
            <paper-button raised class="mainContentButton">Raised button</paper-button>
        </div>
        <div>
            <paper-button raised class="mainContentButton">Raised button</paper-button>
        </div>
    </div>
</div>
.mainContentButton {
width: 35vw;
height: 25vw;
background: #03a9f4;

}

我的意图是有4个大按钮，覆盖页面的大部分，同时作为页面的中心（水平和垂直）对于水平部分，我在聚合物材料的模糊部分中找到了关于“水平中心对齐布局”属性的某处，我给了每个div。对于垂直居中，我找不到任何解决方案。

注意：我来自使用bootstrap网格系统进行定位的背景，这意味着使用div（例如row＆amp; col）的类来定位页面中的元素。现在我只想了解材料设计（聚合物？）附带用于在页面中定位元素的任何工具，或者为此我需要使用不同的方法（使用css或使用其他前端框架）

欢迎任何帮助。提前谢谢！

定位元素采用材料设计

0 个答案: