Flexbox布局问题：如何让H1元素居中显示在段落上方

Got it, let's get this layout working exactly how you want! The main issues with your current code are a small syntax error in your Flex CSS, and applying display: flex to the column containers in a way that makes your h1 and p line up horizontally instead of vertically. Here's how to fix it step by step:

Step 1: Clean Up Your HTML #

First, you have an extra closing </div> tag right before your .parent container — let's remove that to avoid unexpected layout glitches.

Step 2: Fix the Flexbox CSS #

Here's the corrected CSS, with breakdowns of what each part does:

/* Parent container: creates the two-column layout */
.parent {
  display: flex;
  flex-flow: row wrap; /* Fixed syntax: added colon after property name */
  gap: 2rem; /* Optional: adds space between columns for better readability */
  padding: 1rem; /* Optional: adds padding around the whole layout */
}

/* Column containers: stack h1 and p vertically */
.col1, .col2 {
  display: flex;
  flex-direction: column; /* Ensures heading sits above paragraph */
  flex: 1; /* Makes columns take equal width in the parent */
  min-width: 300px; /* Optional: prevents columns from getting too narrow on small screens */
}

/* Center the heading above its paragraph */
h1 {
  text-align: center; /* Centers the heading text horizontally */
  margin-top: 0; /* Optional: removes default top margin for cleaner spacing */
}

Key Changes Explained: #

• Fixed syntax error: flex-flow row wrap → flex-flow: row wrap; (CSS properties always need a colon after the property name)
• Vertical column stacking: Setting .col1 and .col2 to flex-direction: column ensures the h1 and p inside each column stack vertically, which is exactly what you want
• Equal-width columns: flex: 1 makes both columns take up the same amount of space in the parent container
• Simplified centering: text-align: center on the h1 is the most straightforward way to center the heading text above its paragraph. If you wanted the entire h1 block to be centered (not just the text), align-self: center would also work here!

Full Working Code #

HTML #

<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>Centered Headings Layout</title>
  <link rel="stylesheet" type="text/css" href="flex.css">
</head>
<body>
  <div class="parent">
    <div class="col1">
      <h1>Heading 1</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
      </p>
    </div>
    <div class="col2">
      <h1>Heading 2</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
      </p>
    </div>
  </div>
</body>
</html>

CSS (flex.css) #

.parent {
  display: flex;
  flex-flow: row wrap;
  gap: 2rem;
  padding: 1rem;
}

.col1, .col2 {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 300px;
}

h1 {
  text-align: center;
  margin-top: 0;
  border-bottom: 1px solid #eee; /* Optional: adds a subtle line under headings for better visual separation */
  padding-bottom: 0.5rem;
}

p {
  line-height: 1.6; /* Optional: improves paragraph readability */
}

This will give you two clean columns, each with a centered heading sitting neatly above its paragraph. Feel free to tweak the gap, padding, or min-width values to match your design preferences!

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