如何正确处理JSP中的CSS样式以修复页面对齐与标题问题

问题描述 #

测试JSP文件时遇到页面显示对齐问题，希望文本能居中显示，同时移除顶部的配置标题，示例代码如下：

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <%@include file="/includes/head.jsp"%>
    <style type="text/css">
        body {
            background-color: rgba(26, 35, 115, 0.47);
            color: #fff;
        }
    </style>
</head>
<body class="text-center vsc-initialized">
<%@include file="/includes/header.jsp"%>
<div class="cover-container d-flex h-100 p-3 mx-auto flex-column">
    <main role="main" class="inner cover">
        <h1 class="cover-heading">Welcome</h1>
        <h1 class="cover-heading">to</h1>
        <h1 class="cover-heading">Project Management</h1>
        <h1 class="cover-heading">System</h1>
    </main></div>
<%@include file="/includes/footer.jsp"%>
</body>
</html>

问题分析与解决方案 #

1. 文本居中问题：属于CSS范畴

页面已使用Bootstrap的text-center、d-flex类，但可能存在样式冲突或布局未完全生效的情况，可通过以下方式调整：

• 确保Bootstrap依赖正常引入：检查/includes/head.jsp是否包含Bootstrap CSS文件，若未引入，可补充引入或自定义CSS实现居中：

  html, body {
      height: 100%;
      margin: 0;
      padding: 0;
  }
  .cover-container {
      height: calc(100vh - 头部高度); /* 减去header高度，避免内容被遮挡 */
      justify-content: center; /* 实现垂直居中 */
  }
  .inner.cover {
      text-align: center;
  }
  .cover-heading {
      margin: 0.5rem 0; /* 优化标题间距 */
  }
  

2. 移除顶部配置标题：结合JSP或CSS处理

顶部标题来自<%@include file="/includes/header.jsp"%>引入的片段，有两种处理方式：

• 修改JSP文件（彻底移除）：直接打开/includes/header.jsp，找到对应配置标题的代码（如<h2>配置标题</h2>），删除或注释该内容。适合所有引入此header的页面都不需要该标题的场景。
• 用CSS隐藏（仅当前页面生效）：若不想修改header.jsp，可在当前页面的style标签中添加样式。先通过浏览器开发者工具定位标题的选择器（类名或标签名），再设置：

  /* 示例：假设标题类为top-config-title */
  .top-config-title {
      display: none;
  }
  

总结 #

• 文本居中是CSS问题，通过调整样式即可解决；
• 移除顶部标题可选择修改JSP（header.jsp）或用CSS隐藏，根据实际需求选择即可。

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