MaterializeCSS valign-wrapper响应式失效问题求助

我太懂你这种头疼的情况了——想用Materialize的columns做响应式布局，大屏让列均分宽度，小屏下自动换行占满整行，还得让内容同时垂直水平居中，结果小屏模式下列死活不换行，完全达不到预期是吧？别着急，咱们一步步拆解解决问题。

1. 先把响应式列的基础用法搞对 #

你遇到小屏不换行的核心问题，大概率是没正确使用Materialize的断点栅格类。Materialize的栅格系统基于12列，要实现响应式，必须给列加上对应屏幕尺寸的类：

• s12：小屏（宽度<600px）占满12列（也就是100%宽度），自动换行
• m6：中屏（≥600px）占6列（50%宽度）
• l3：大屏（≥992px）占3列（25%宽度）

举个简单的两列布局正确写法：

<div class="container">
  <div class="row">
    <!-- 小屏占满整行，中屏及以上占50% -->
    <div class="col s12 m6">
      第一列内容
    </div>
    <div class="col s12 m6">
      第二列内容
    </div>
  </div>
</div>

调整浏览器窗口到小屏尺寸，列就会自动换行，每列占满100%宽度了。

2. 实现内容的垂直+水平居中 #

Materialize自带了很多实用的辅助类，配合少量自定义样式就能轻松实现居中：

列内内容水平居中 #

直接给列（或列内元素）加center-align类即可：

<div class="col s12 m6 center-align">
  我是水平居中的内容
</div>

列的垂直居中（在row内） #

给row加valign-wrapper类，这个类是Materialize专门用来垂直对齐子元素的：

<div class="row valign-wrapper">
  <div class="col s12 m6 center-align">
    我在row里垂直+水平居中
  </div>
  <div class="col s12 m6 center-align">
    我也是哦
  </div>
</div>

整个页面的垂直水平居中 #

如果需要让内容在整个页面居中，给body或外层容器加一点自定义CSS：

.page-center-container {
  min-height: 100vh;
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  margin: 0;
}

然后把内容放在这个容器里就行。

3. 排查常见坑点 #

如果按上面的写法还是有问题，检查这几个地方：

• 资源引入是否正确：确保已经引入Materialize的CSS、JS，以及它依赖的jQuery，版本不匹配也可能导致样式失效
• 有没有自定义样式覆盖默认行为：比如给row加了flex-nowrap，或者给col加了固定宽度、float:left，这些都会破坏响应式换行
• 列内内容是否太宽：如果列里的内容有固定宽度（比如图片、长文本），给内容加max-width:100%或Materialize的responsive-img类，避免撑开列导致不换行

完整示例代码 #

把所有需求整合在一起的完整示例：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  <style>
    .page-center {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0;
      background-color: #f5f5f5;
    }
  </style>
</head>
<body class="page-center">
  <div class="container">
    <div class="row valign-wrapper">
      <div class="col s12 m6 center-align">
        <div class="card-panel teal lighten-2 white-text">
          小屏下占满整行<br>大屏占50%宽度<br>内容垂直水平居中
        </div>
      </div>
      <div class="col s12 m6 center-align">
        <div class="card-panel purple lighten-2 white-text">
          我和左边的列是一样的布局哦😉
        </div>
      </div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>

调整浏览器窗口大小测试，小屏下列会自动换行，内容也能完美居中啦！

内容的提问来源于stack exchange，提问作者maxisme