CSS实现图文并排垂直水平居中时文字无法自动换行问题求助

解决方案 #

直接替换原有CSS为以下代码即可实现需求：

#placard3 {
  border:none; 
  background-color:#acd373;
  border-radius:10px;
  padding: 12px 8px; /* 可选，调整内边距让视觉更协调 */
}
#placard3 .col-xs-12 {
  display: flex;
  align-items: center; /* 实现内容垂直居中 */
  justify-content: center; /* 实现整体水平居中 */
  gap: 16px; /* 图片和文字的间距，可自行调整数值 */
}
#placard3 .placard-image {
  flex-shrink: 0; /* 禁止图片被压缩，固定占位 */
}
.placard-body {
  color:#ff4022;
  flex: 1; /* 自动占满图片外的剩余可用宽度 */
  min-width: 0; /* 关键属性，允许flex子元素宽度小于内容宽度，触发文字换行 */
}
.placard-body p {
  margin: 0; /* 清除p标签默认外边距，避免影响对齐效果 */
}

原理说明 #

• 原有代码中图片和文字都是行内级元素，视口宽度不足时自然会触发折行，改成flex布局后两者会始终保持在同一行
• flex-shrink:0 确保图片不会因为宽度不足被压缩变形
• min-width:0 解决了flex布局中默认子元素最小宽度等于内容宽度的问题，允许文字容器自动收缩，内部文字自动换行
• 无需修改任何HTML结构，完全通过CSS实现需求，兼容所有现代浏览器。

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