我试图纵向和横向居中一张纸卡,无法弄清楚我哪里出错:
<body unresolved>
<div class="flex-vertical">
<div class="flex-horizontal">
<paper-card heading="Login" image="http://placehold.it/400x175/FFC107/000000">
<div class="card-content">
<paper-input label="Windows username" always-float-label></paper-input>
<paper-input label="Password" type="password" always-float-label></paper-input>
</div>
<div class="card-actions">
<paper-button>Login</paper-button>
</div>
</paper-card>
</div>
</div>
</body>
<style is="custom-style">
body {
@apply(--layout-fullbleed);
@apply(--layout-vertical);
}
.flex-horizontal {
@apply(--layout-horizontal);
@apply(--layout-center-justified);
}
.flex-vertical {
@apply(--layout-vertical);
@apply(--layout-center);
}
</style>
答案 0 :(得分:2)
首先我们需要导入iron-flex-layout-classes
元素。然后我们定义了我们需要的类,并包含iron-flex-layout-classes
元素所需的模块。
<style is="custom-style" include="iron-flex iron-positioning iron-flex-alignment">
.card-container {
height: 100%;
}
</style>
为了实现居中,我们使用了两个div:
<div class="horizontal layout center-justified card-container">
<div class="vertical layout center-justified">
仅需要card-container
类将div的高度设置为100%。我们需要div具有100%的高度才能将它们设置在页面的中心。
下面的工作演示。
<!doctype html>
<head>
<meta charset="utf-8">
<!---- >
<base href="https://polygit.org/components/">
Toggle below/above as backup when server is down
<!---->
<base href="https://polygit2.appspot.com/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-button/paper-button.html">
<link rel="import" href="paper-input/paper-input.html">
<link rel="import" href="paper-card/paper-card.html">
<link rel="import" href="iron-flex-layout/iron-flex-layout-classes.html">
<style is="custom-style" include="iron-flex iron-positioning iron-flex-alignment">
.card-container {
height: 100%;
}
</style>
</head>
<body unresolved class="fullbleed">
<div class="horizontal layout center-justified card-container">
<div class="vertical layout center-justified">
<paper-card heading="Login" image="http://placehold.it/400x175/FFC107/000000">
<div class="card-content">
<paper-input label="Windows username" always-float-label></paper-input>
<paper-input label="Password" type="password" always-float-label></paper-input>
</div>
<div class="card-actions">
<paper-button>Login</paper-button>
</div>
</paper-card>
</div>
</div>
</body>