material design lite(MDL) 中的水平和垂直中心卡
Horizontal and vertical center card in material design lite(MDL)
我正在尝试将卡片垂直和水平居中放置在页面中央。我,能够水平居中卡片。但无法将其垂直居中。我没有在 MDL 中找到任何 class 来垂直居中卡片。
水平居中代码
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--3-col">
<!-- this is just dummy columns -->
</div>
<div class="mdl-cell mdl-cell--6-col">
<figure >
<div class="mdl-card mdl-shadow--6dp">
<div class="mdl-card__title mdl-color--primary mdl-color-text--white">
<h2 class="mdl-card__title-text ">Sign in</h2>
</div>
<div class="mdl-card__supporting-text">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" id="login"/>
<label class="mdl-textfield__label" for="login">User Name</label>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="password" id="password"/>
<label class="mdl-textfield__label" for="password">Password</label>
</div>
</div>
<div class="mdl-card__actions mdl-card--border">
<div class="mdl-grid">
<button class="mdl-cell mdl-cell--12-col mdl-button mdl-button--raised mdl-button--colored mdl-js-button mdl-js-ripple-effect mdl-color-text--white">
Sign in
</button>
</div>
</div>
</div>
</figure>
</div>
<div class="mdl-cell mdl-cell--3-col">
<!-- this is just dummy columns -->
</div>
</div>
以上代码只是将卡片水平居中。我也想把卡片垂直居中。
我怎样才能在 MDL 中实现这个 Class。
如果您乐于使用 CSS 而不是依赖 MDL 类,您可以使用 flexbox 非常轻松地做到这一点:
body {
display: flex;
align-items: center;
justify-content: center;
}
但通常最好创建一个包装元素而不是在主体上设置此样式..除非这将是页面上的唯一元素,因为我猜它可能在页面上的标志上。
对于使用包装器的版本,请参阅更新后的 fiddle,我用包装器包装了 mdl-grid 并添加了 height: 100vh
到包装器样式:
我正在尝试将卡片垂直和水平居中放置在页面中央。我,能够水平居中卡片。但无法将其垂直居中。我没有在 MDL 中找到任何 class 来垂直居中卡片。
水平居中代码
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--3-col">
<!-- this is just dummy columns -->
</div>
<div class="mdl-cell mdl-cell--6-col">
<figure >
<div class="mdl-card mdl-shadow--6dp">
<div class="mdl-card__title mdl-color--primary mdl-color-text--white">
<h2 class="mdl-card__title-text ">Sign in</h2>
</div>
<div class="mdl-card__supporting-text">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" id="login"/>
<label class="mdl-textfield__label" for="login">User Name</label>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="password" id="password"/>
<label class="mdl-textfield__label" for="password">Password</label>
</div>
</div>
<div class="mdl-card__actions mdl-card--border">
<div class="mdl-grid">
<button class="mdl-cell mdl-cell--12-col mdl-button mdl-button--raised mdl-button--colored mdl-js-button mdl-js-ripple-effect mdl-color-text--white">
Sign in
</button>
</div>
</div>
</div>
</figure>
</div>
<div class="mdl-cell mdl-cell--3-col">
<!-- this is just dummy columns -->
</div>
</div>
以上代码只是将卡片水平居中。我也想把卡片垂直居中。
我怎样才能在 MDL 中实现这个 Class。
如果您乐于使用 CSS 而不是依赖 MDL 类,您可以使用 flexbox 非常轻松地做到这一点:
body {
display: flex;
align-items: center;
justify-content: center;
}
但通常最好创建一个包装元素而不是在主体上设置此样式..除非这将是页面上的唯一元素,因为我猜它可能在页面上的标志上。
对于使用包装器的版本,请参阅更新后的 fiddle,我用包装器包装了 mdl-grid 并添加了 height: 100vh
到包装器样式: