如何在标题图片下方添加独立的文本区域？

你想在"About Me"标题下方添加独立的文本区域，但当前文本总是和标题挤在一起，没法实现上下分离的布局效果。问题根源在CSS的flex布局设置上，下面是具体的修复方案：

问题分析 #

.aboutme容器设置了display: flex但未指定排列方向，默认是横向排列（row），再加上align-items: center和justify-content: center的居中属性，导致标题和文本区域被强制挤在同一水平位置，无法垂直分布。

修改方案 #

1. 调整.aboutme的CSS样式 #

修改.aboutme的flex布局设置，让子元素垂直排列：

.aboutme {
  background-image: url('/images/img-7.jpg');
  background-position: center;
  background-size: cover;
  color: #fff;
  font-size: 100px;
  display: flex;
  flex-direction: column; /* 设置垂直排列 */
  height: 90vh;
  align-items: center; /* 子元素水平居中 */
  justify-content: flex-start; /* 内容从顶部开始排列 */
  padding-top: 5rem; /* 避免标题贴顶 */
}

2. 优化.aboutmetext的样式 #

移除无效属性，增加间距和调整字体：

.aboutmetext{
  color: black;
  font-family: 'Courier New', Courier, monospace;
  background-color: white;
  padding: 4rem;
  font-size: 1.5rem; /* 缩小字体，区分标题 */
  margin-top: 2rem; /* 和标题拉开距离 */
}

3. React组件结构（无需修改，保持原结构即可） #

import React from 'react';
import '../../App.css';

function AboutMe() {
  return (
    <div className='aboutme'>
      <h1>About Me</h1>
      <div className='aboutmetext'>
        这里是你要写入的内容
      </div>
    </div>
  );
}

export default AboutMe;

效果说明 #

修改后，标题会在页面上方居中显示，文本区域紧随其下，两者保持独立的布局空间，完全符合你要的标题下方添加文本区域的需求。

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