设置max-width为30ch后，内容区标题与表格未被正确约束

针对H2标题的修复 #

你设置的#content h2 { margin: auto; max-width: 30ch; }理论上应该生效，失效大概率是以下两个原因：

• 存在优先级更高的CSS规则（比如带!important的样式、更具体的选择器）覆盖了你的设置
• H2的display属性被修改为非block类型（比如inline-block），导致margin: auto无法触发居中，max-width也无法正确生效

修复代码：

#content h2 {
  display: block; /* 明确声明块级元素特性 */
  max-width: 30ch;
  margin-left: auto;
  margin-right: auto;
  /* 可选：长标题超出时保持居中对齐 */
  text-align: center;
}

如果还是不生效，打开浏览器开发者工具（F12）查看元素样式面板，排查是否有其他规则覆盖了max-width，必要时提升选择器优先级（比如增加父元素前缀）。

针对表格的修复 #

表格默认display: table的特性会让它根据内容自动撑开宽度，直接设置max-width无法生效，需要配合表格布局规则强制约束：

修复代码：

#content table {
  max-width: 30ch;
  margin-left: auto;
  margin-right: auto;
  table-layout: fixed; /* 强制表格遵守设置的宽度，而非自适应内容 */
  width: 100%; /* 让表格在max-width范围内占满可用宽度 */
}

/* 可选：处理表格内文本溢出，避免撑破容器 */
#content th, #content td {
  word-wrap: break-word;
  overflow: hidden;
  text-align: left; /* 根据需求调整对齐方式 */
}

全局优化建议 #

可以把居中+宽度限制的逻辑抽离成通用类，减少重复代码：

.content-limited {
  max-width: 30ch;
  margin-left: auto;
  margin-right: auto;
}

然后给需要限制的元素（p、h2、table）添加这个类：

<div id="content">
  <h2 class="content-limited">Foo</h2>
  <p class="content-limited">...</p>
  <table class="content-limited">...</table>
  <img src="..." alt="...">
</div>

后续新增元素时直接加类即可，维护更便捷。

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