居中问题修复说明

🔧 问题分析

"欢迎来到 Jiao77" 卡片没有居中的问题是因为 Container 组件只设置了 max-width 但没有添加 margin: 0 auto 来实现水平居中。

✅ 修复内容

1. 修复 Container 组件

在 src/components/Container.astro 中为所有尺寸的容器添加了 margin: 0 auto：

/* 尺寸样式 */
.container-small {
  max-width: 400px;
  margin: 0 auto;  /* 添加自动居中 */
}

.container-medium {
  max-width: 600px;
  margin: 0 auto;  /* 添加自动居中 */
}

.container-large {
  max-width: 800px;
  margin: 0 auto;  /* 添加自动居中 */
}

.container-full {
  width: 100%;
}

2. 增强页面布局

在 src/pages/index.astro 中添加了外层容器来确保最佳的居中效果：

<main class="main-content">
  <div class="container mx-auto px-4">  <!-- 新增的容器 -->
    <AnimatedElement animation="fadeInUp" delay={200}>
      <Container variant="glass" size="large" padding="xl" className="text-center mb-12">
        <h1 class="hero-title">欢迎来到 Jiao77</h1>
        <p class="hero-subtitle">探索现代化的网站体验</p>
      </Container>
    </AnimatedElement>
  </div>
</main>

3. 添加配套的 CSS 样式

.container {
  max-width: 1200px;
  width: 100%;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

🎯 修复效果

现在 "欢迎来到 Jiao77" 卡片会：

✅ 在桌面端完美居中显示
✅ 在移动端保持良好的响应式布局
✅ 保持原有的玻璃质感和动画效果
✅ 与下方的导航卡片网格保持一致的对齐

📱 响应式支持

修复同时考虑了不同屏幕尺寸：

大屏设备: 最大宽度 800px，居中显示
中等设备: 自动适应容器宽度
小屏设备: 添加适当的左右内边距防止贴边

🚀 部署更新

要应用这个修复到生产环境，请运行：

# 构建新版本
npm run build

# 部署到服务器
./deploy-full.sh

修复已完成！现在您的大标题卡片会在页面中完美居中显示。

2.1 KiB Raw Blame History Unescape Escape