无法显示项目Shared文件夹内图片且元素居中对齐失效问题求助

问题排查与解决方法 #

1. h7标签无效问题

HTML 官方标准仅定义了 h1 ~ h6 共6级标题标签，不存在 h7 标签，浏览器会将其识别为无默认样式的自定义行内元素，你设置的居中样式自然无法生效，直接替换为 h6 或者普通 p 标签即可。

2. 图片加载失败问题

你用的相对路径是基于视图文件物理存储位置的路径，但 Web 服务运行时的静态资源访问路径和视图存储路径是完全隔离的：

• ASP.NET Core / MVC 默认仅开放 wwwroot 目录作为静态资源可访问目录，你放在视图目录下的 Shared 文件夹是服务端存储视图模板的目录，不会对外暴露，外部请求根本访问不到目录内的图片文件。
• 正确操作：先将 HappyHoliday.jpg 移动到 wwwroot 下的专用图片目录（比如新建 wwwroot/images 文件夹），再将 img 标签的 src 属性修改为 src="~/images/HappyHoliday.jpg"，Razor 语法里的 ~ 符号会自动解析为站点根路径，不受当前页面路由层级影响，不会出现路径解析错误。

3. 居中对齐失效问题

给 p 标签加 text-align:center 本身逻辑没问题，如果被项目引入的其他前端框架默认样式覆盖，可以换成兼容性更强的 flex 布局实现：

<div style="display:flex;flex-direction:column;align-items:center;gap:2rem;">
  <h6>HAPPY @Model.Holiday</h6>
  <img src="~/images/HappyHoliday.jpg" alt="Happy Holiday">
</div>

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