助手 - Materialize 中文

我们有易于使用的类来帮助你对齐内容。

垂直对齐

你可以通过向包含要垂直对齐的项目的容器添加类 valign-wrapper 来轻松地垂直居中。

这应该是垂直对齐的


<div class="valign-wrapper">
  <h5>This should be vertically aligned</h5>
</div>

文本对齐

这些类用于水平对齐内容：.left-align、.right-align 和 .center-align。

这应该是左对齐的

这应该是右对齐的

这应该是居中对齐的


  <div>
    <h5 class="left-align">This should be left aligned</h5>
  </div>
  <div>
    <h5 class="right-align">This should be right aligned</h5>
  </div>
  <div>
    <h5 class="center-align">This should be center aligned</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`	仅对台式机隐藏
`.show-on-small`	仅对移动设备显示
`.show-on-medium`	仅对平板电脑显示
`.show-on-large`	仅对台式机显示
`.show-on-medium-and-up`	对平板电脑及以上显示
`.show-on-medium-and-down`	对平板电脑及以下显示

用法


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

这些类有助于设置您网站上各种内容的格式。

截断

要在省略号中截断长文本行，请将类 truncate 添加到包含文本的标签中。请参见下方卡片内被截断的标题示例。

这是一个将被截断的极长的标题


  <h4 class="truncate">This is an extremely long title that will be truncated</h4>

悬停

hoverable 是一个悬停类，它添加了如下所示的框阴影动画。它可以在大多数元素上使用，但主要用于卡片。

卡片标题

我是一张非常简单的卡片。我擅长包含小信息块。我非常方便，因为我只需要很少的标记即可有效使用。

这是一个链接


  <div class="card-panel hoverable"> Hoverable Card Panel</div>

由于我们重写了许多默认浏览器样式和元素，因此我们提供了 .browser-default 类，以将这些元素还原为其原始状态。

元素名称	还原的样式
UL	项目符号
SELECT	浏览器默认选择元素
INPUT	浏览器默认输入

对齐