段落无法与图片居中对齐的CSS布局问题求助

回答： #

嘿，这个问题我之前也踩过坑！核心原因是块级元素和替换元素的居中逻辑不一样：

• 你的图片能居中，其实不是靠.articles的flex布局，而是因为.article设置了text-align: center——<img>属于替换元素，这个属性会直接让它在父容器里水平居中。
• 但<p>是块级元素，text-align: center只负责让它内部的文本居中，不会改变它自身的位置。当你给p设置width: 80%后，块级元素默认左对齐，自然就和图片错开了。

给你两个简单靠谱的解决方案：

方案1：给段落加自动左右外边距（最直接）

只需要给.article p加上margin: 0 auto，利用块级元素的margin: auto特性让它自动居中：

/* 修改后的CSS */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: poppins; }
.articles { width: 100%; display: flex; justify-content: center; text-align: center; gap: 1rem; /* 可选：加个间距让卡片不挤在一起 */ }
.article { width: 500px; background-color: wheat; display: block; text-align: center; border: black 2px solid; padding: 1rem; /* 可选：加内边距避免内容贴边框 */ }
.article img { width: 80%; }
.article p { width: 80%; background-color: gray; margin: 0 auto; /* 关键代码：自动左右外边距 */ }

方案2：把.article改成垂直flex布局（适合复杂场景）

如果你的.article以后还要加标题、按钮等元素，直接把.article改成垂直flex布局，用align-items: center让所有子元素都居中：

/* 修改后的CSS */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: poppins; }
.articles { width: 100%; display: flex; justify-content: center; text-align: center; gap: 1rem; }
.article { width: 500px; background-color: wheat; display: flex; flex-direction: column; /* 垂直排列子元素 */ align-items: center; /* 子元素水平居中 */ border: black 2px solid; padding: 1rem; }
.article img { width: 80%; }
.article p { width: 80%; background-color: gray; }

这两种方法都能让段落和图片完美对齐，选哪个看你后续的布局需求就行 😊

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