个人网站About Me页面图片居中及布局异常问题求助

1. 图片无法正确居中 #

如果用justify-content: center无效，先检查父容器的布局属性：

• 给图片的父容器添加：

  .image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; /* 确保父容器占满可用宽度 */
  }
  

• 若不想用flex，也可以直接给图片设置：

  img {
    display: block;
    margin: 0 auto;
  }
  

注意：如果父容器有固定宽度限制，要确保宽度足够容纳居中逻辑。

2. 第一张图片紧贴页面边缘 #

给图片或其容器添加外边距/内边距即可：

• 给所有图片统一设置外边距：

  img {
    margin: 2rem; /* 上下左右都留间距，可根据需求调整数值 */
  }
  

• 或者给页面的主内容容器加内边距，避免所有元素贴边：

  main {
    padding: 0 2rem;
  }
  

3. 导航栏遮挡图片 #

这一般是导航栏用了position: fixed或position: absolute脱离了文档流导致的，解决方法：

• 给页面的主内容区域添加顶部内边距，值等于导航栏的高度：

  main {
    padding-top: 70px; /* 假设导航栏高度是70px，根据实际数值调整 */
  }
  

• 若导航栏层级不够被图片覆盖，可给导航栏加层级属性：

  nav {
    z-index: 999; /* 确保导航栏在最上层 */
  }
  

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