CSS文本块对齐问题求助：网页布局卡壳寻求解决方案

Hey there! Let's get those four text blocks arranged the way you want—since you're new to CSS, I'll keep this straightforward and explain each step clearly.

Right now, your four lp-pom-text-1 to lp-pom-text-4 divs are block-level elements, which means they automatically stack vertically one after another. To get them to sit side-by-side (or in a neat grid), we'll use modern CSS layout tools like Flexbox or Grid—these are way easier to work with than old methods like floats.

Solution 1: Flexbox (Great for Simple Horizontal/Responsive Layouts) #

Flexbox is perfect for lining up elements in a row (or column) and making them responsive. Here's how to update your CSS:

/* Style the parent container to control child layout */
.lp-pom-block-content {
  display: flex;
  justify-content: center; /* Centers the blocks horizontally on the page */
  gap: 20px; /* Adds space between each block (cleaner than margins!) */
  flex-wrap: wrap; /* Lets blocks wrap to a new row on small screens */
  margin: 20px 0; /* Adds some space above/below the whole section */
}

#lp-pom-text-comment-marche p { 
  text-align: center; 
  margin-top: 20px; 
}

#comment-marche { 
  font-size: 21px; 
  font-family: Lato; 
  font-weight: 400; 
  font-style: normal; 
}

/* Combine styles for your four text blocks to avoid repetition */
#lp-pom-text-1, 
#lp-pom-text-2, 
#lp-pom-text-3, 
#lp-pom-text-4 {
  width: 300px;
  padding: 0 10px; /* Prevents text from touching the edges of the block */
}

/* Move inline text alignment to CSS for cleaner code */
#lp-pom-text-1 p, 
#lp-pom-text-2 p, 
#lp-pom-text-3 p, 
#lp-pom-text-4 p {
  text-align: center;
}

What each part does:

• display: flex: Turns the parent container into a flex container, making its children line up horizontally by default.
• justify-content: center: Keeps your blocks centered on the page. Swap this with space-between if you want them to stretch from edge to edge with equal gaps.
• gap: 20px: Adds consistent space between each block without extra margins on the first/last element.
• flex-wrap: wrap: Ensures blocks move to a new row when the screen is too narrow (no horizontal scrollbars!).

Solution 2: Grid (Perfect for Precise Row/Column Control) #

If you want more control over how blocks arrange (e.g., 2 blocks per row on medium screens), use CSS Grid instead:

.lp-pom-block-content {
  display: grid;
  /* Creates as many columns as possible, each at least 300px wide */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px; /* Space between blocks */
  justify-items: center; /* Centers each block inside its grid cell */
  padding: 0 20px; /* Stops blocks from touching the screen edges */
  margin: 20px 0;
}

/* Keep the rest of your CSS the same as Solution 1 */
#lp-pom-text-comment-marche p { 
  text-align: center; 
  margin-top: 20px; 
}

#comment-marche { 
  font-size: 21px; 
  font-family: Lato; 
  font-weight: 400; 
  font-style: normal; 
}

#lp-pom-text-1, 
#lp-pom-text-2, 
#lp-pom-text-3, 
#lp-pom-text-4 {
  width: 300px;
  padding: 0 10px;
}

#lp-pom-text-1 p, 
#lp-pom-text-2 p, 
#lp-pom-text-3 p, 
#lp-pom-text-4 p {
  text-align: center;
}

What grid-template-columns does:

repeat(auto-fit, minmax(300px, 1fr)) tells the browser to:

• Make as many columns as fit on the screen
• Each column should be at least 300px wide
• Any extra space gets split evenly between columns (so they stretch to fit if there's room)

Clean Up Your HTML #

You can remove the inline style="text-align: center;" from each <p> tag now—we've moved that style to the CSS, which keeps your code organized and easier to update later.

Either of these solutions should give you the neat, responsive layout you're aiming for. Start with Flexbox if you want something simple, or Grid if you need more precise control!

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