如何解决Flex布局下容器文本与其他容器垂直对齐问题？

你当前的代码存在两个核心问题导致文本无法正确垂直对齐：一是父容器设置了固定高度限制内容展示，二是未处理段落标签的默认边距，且Flex布局未对文本区域做合理分配。以下是具体修复方案：

步骤1：移除不合理的固定高度限制 #

原代码中.shrink-container设置了height:50px，这会强制压缩容器高度导致内部内容被截断，直接去掉该属性即可：

.shrink-container {
  width: 800px;
  margin: 0 auto;
  /* 移除height:50px */
}

步骤2：重置段落标签默认边距 #

浏览器默认会给<p>标签添加上下边距，这会干扰垂直对齐效果，全局重置该样式：

p {
  margin: 0;
}

步骤3：优化Flex布局，固定文本区域对齐规则 #

调整.container的内边距让容器有足够高度，同时给内部三个段落分配均等宽度并设置各自的对齐方式，确保文本长短不影响整体布局：

.container {
  display: flex;
  align-items: center; /* 保持垂直居中 */
  justify-content: space-between;
  background-color: white;
  padding: 15px 10px; /* 增加上下内边距，提升视觉舒适度 */
  margin: 10px 0;
  border-radius: 5px;
}

/* 让三个段落均分容器宽度，分别对齐左、中、右 */
.container p {
  flex: 1;
}
.container p:first-child {
  text-align: left;
}
.container p:nth-child(2) {
  text-align: center;
}
.container p:last-child {
  text-align: right;
}

完整修改后的CSS代码 #

body {
  font-family: Helvetica;
  background-color: #d3d3d3;
  color: black;
}

.shrink-container {
  width: 800px;
  margin: 0 auto;
}

p {
  margin: 0;
}

.container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: white;
  padding: 15px 10px;
  margin: 10px 0;
  border-radius: 5px;
}

.container p {
  flex: 1;
}
.container p:first-child {
  text-align: left;
}
.container p:nth-child(2) {
  text-align: center;
}
.container p:last-child {
  text-align: right;
}

#clickMe {
  display: inline-block;
  padding: 10px;
  font-family: Helvetica;
  border-radius: 3px;
  border: 1px solid;
}
#clickMe:hover{
    cursor: pointer;
}

.notInStock{
    display:none;
}

.darkModeBackground{
    background-color: black;
    color:white;
}
.darkModeContainers{
    background-color: #5A5A5A;
    color: white;
}
.darkModeClickMe{
    border-color: white;
}

这样修改后，每个商品卡片的文本会保持垂直居中，且三个文本区域分别固定在左、中、右位置，不会因文本长短出现对齐混乱的情况。

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