手册 - Materialize

我们使用几个简单的类来是你的页面进行对齐。

垂直对齐

通过增加 valign-wrapper类来使包裹的内容垂直居中。

这个应该垂直居中对齐


<div class="valign-wrapper">
  <h5 class="valign">这个应该垂直居中对齐</h5>
</div>

文本对齐

这些类用于水平对齐内容。我们有 .left-align, .right-align 和 .center-align

这个应该左对齐

这个应该右对齐

这个应该居中对齐


  <div>
    <h5 class="left-align">这个应该左对齐</h5>
  </div>
  <div>
    <h5 class="right-align">这个应该右对齐</h5>
  </div>
  <div>
    <h5 class="center-align">这个应该居中对齐</h5>
  </div>

快速浮动

快速浮动通过添加类left 或 right到元素中。!important常用避免特殊问题。


<div class="left">...</div>
<div class="right">...</div>

我们提供易于使用的类来隐藏特定屏幕大小的内容。

	屏幕种类
`.hide`	隐藏，所有设备有效。
`.hide-on-small-only`	隐藏，仅手机设备有效。
`.hide-on-med-only`	隐藏，仅平板设备有效。
`.hide-on-med-and-down`	隐藏，桌面设备及以下尺寸的设备有效
`.hide-on-med-and-up`	隐藏，仅桌面设备及以上尺寸有效。
`.hide-on-large-only`	隐藏，仅桌面设备隐藏。

用法


  <div class="hide-on-small-only"></div>

这些类用于格式话网站上的不同内容。

截尾

清空一行中溢出的文本并用省略号代替，添加类truncate到包含内容的标签里。看下面一个卡片标题头被截断的例子。

这是一个长长的标题头被截断。


  <h4 class="truncate">这是一个长长的标题头被截断。</h4>

悬浮

hoverable是一个悬浮类，给盒子增加一个动态的阴影就像下面。它可以用在很多元素中，并不意味着只能用于卡片中。

卡片标题

我是一个非常简单的卡片。我擅长展示小部分的内容。我很方便，因为我包含一个标记效果。

这是一个链接


  <div class="card-panel hoverable"> 可悬浮卡片面板</div>

因为我们重写很多默认的浏览器样式与元素，我们提供.browser-default类来还原为浏览器默认的样式或元素。

元素名称	关联的样式
UL	子弹点
SELECT	浏览器select元素

对齐