如何对齐带边框li内左侧h1、居中p、右侧img三类子元素

你已经给li元素设置了flex布局，完全可以通过flex原生能力实现动态适配的对齐效果，不需要硬算margin或者使用float属性，修改方案如下：

核心修改点 #

• 删除所有硬编码的calc margin和无效的float属性：flex容器的子元素设置float不会生效，固定数值的margin计算无法适配动态内容宽度
• 给三个子元素分配固定的布局权重，保证p元素始终处于li的正中间位置，不受左右两边元素内容宽度影响
• 分别控制三个区域的内容对齐方式

修改后的完整CSS代码 #

html,
body {
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
}

#container{
  display: block;
  margin: 0 auto;
  max-width: 40rem;
  padding: 1rem;
}

#raidList{
  list-style: none;
  margin: 0;
}

#raidList li{
  background: #ffffff;
  border-radius: 0.5rem;
  min-height: calc(1rem + 96px);
  margin: 1.75rem 0;
  box-shadow: 0.25rem 0.25rem 0.6rem rgba(0,0,0,0.05), 0 0.5rem 1.125rem rgba(75,0,0,0.05);
  display: flex;
  align-items: center;
}

/* 给三个子元素统一设置等宽布局权重 */
#raidList li h1,
#raidList li p,
#raidList li img {
  flex: 1;
  box-sizing: border-box;
  padding: 0 1rem;
}

#raidList li h1{
  text-align: left;
  font-size: 50px;
  margin: 0;
}

#raidList li p{
  text-align: center;
  margin: 0;
}

#raidList li img{
  display: block;
  margin-left: auto;
  max-width: 100%;
  height: auto;
}

可选适配方案 #

如果不需要三个区域严格等宽，希望左右元素仅占据自身内容所需宽度，可以改用以下方案：
给#raidList li添加justify-content: space-between属性，给p元素设置margin: 0 auto即可实现中间元素始终居中，左右元素分别贴靠左右边缘的效果，适合左右内容宽度差异较大的场景。

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