如何让文本在w3-col的沙色区块内居中显示

你现在用的w3-center和margin:auto只能实现水平方向居中，没法让文本在沙色区块的垂直方向也居中，另外代码里的几个不规范写法也会干扰布局：

• HTML原生没有<h7>标签，浏览器无法正确识别这个标签的默认样式
• 块级标题标签（h3/h6等）不能嵌套在<p>标签内部，浏览器渲染时会自动断开p标签，导致多余的空白占位
• 右侧w3-col容器没有设置对齐相关的布局属性，内部元素默认靠顶部排列，自然不会到区块中心位置

用W3.CSS自带的定位工具类就能实现效果，不需要额外引入其他样式，步骤如下：

• 给右侧w3-col l4容器添加w3-display-container类，作为内部元素的定位父容器，保留原有的w3-sand沙色样式
• 删除内部多余的两层重复嵌套的w3-sand容器，把文本外层容器替换为w3-display-middle类，这个类会自动让元素在父容器里水平+垂直双居中
• 修正不规范标签：把不存在的h7换成h6，去掉包裹标题的p标签
• 给右侧容器加个最小高度，避免小屏幕下左右列堆叠、图片未加载时容器高度塌陷

直接替换原来Grid模块的右侧列代码即可：

<div class="w3-row w3-card-4 w3-margin w3-sand">
  <!-- 左侧图片列 -->
  <div class="w3-col l8 s12">
    <img src="../static/images/101.jpg" alt="Nature" style="width:100%">
  </div>
  <!-- 右侧文本列 -->
  <div class="w3-col l4 w3-sand w3-display-container" style="min-height: 320px;">
    <div class="w3-display-middle w3-center" style="width: 80%;">
      <h6>WELCOME</h6>
      <h3><b>Wish you a happy day</b></h3>
      <h6>Keep calm and carry on !</h6>
    </div>
  </div>
</div>

提示：min-height的值可以根据你左侧图片的实际高度调整，正常加载图片时右侧列会自动和左侧等高，这个属性只是做异常场景兼容。

如果习惯用flex布局，也可以直接给右侧l4列加w3-cell w3-cell-middle类配合w3-center，同样能实现垂直居中效果，不用改内部文本结构。

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