如何在列表中实现图片与文本的垂直对齐？

我尝试在无序列表中实现图片与文本的垂直对齐，但无法让列表内的img与h5元素对齐，同时希望二者间存在一定水平间距。以下是我当前使用的CSS和HTML代码：

当前代码 #

CSS代码 #

body .page-five{
  position: absolute;
  width: 100vw;
  height: 1012px;
  left: 0px;
  top: 2868px;
  
  background: rgba(253, 243, 231, 0.97);
}

body .page-five .card-1 {
  position: absolute;
  width: 400px;
  height: 642px;
  left: 80px;
  top: 242px;
  background: #FFFFFF;
  border-radius: 10px;
}

body .page-five ul {
  margin-top: 90px;
}

body .page-five ul li img {
  vertical-align: middle;
}

body .page-five ul li {
  list-style-type: none;
  display: block;
  text-align: left;
  margin-left: 36px;
}

HTML代码 #

<div class="card-1">
  <h2>Produção de ponta a ponta:</h2>
  <ul>
    <li>
      <h5>
        <img src="{% static 'images/body/check.png' %}" alt="bodes">
        <span style="font-weight:600;">Sequência de Manejos:</span>
        <span> Registre e acompanhe todas as etapas 
                do manejo, desde alimentação até vacinação.</span>
      </h5>
    </li>
    <li>
      <h5>
        <img src="{% static 'images/body/check.png' %}" alt="bodes">
        <span style="font-weight:600;">Financeiro: </span>
        <span> Controle completo dos custos e receitas para 
              planejamento financeiro e análise de lucratividade.</span>
      </h5>
    </li>
    <li>
      <h5>
        <img src="{% static 'images/body/check.png' %}" alt="bodes">
        <span style="font-weight:600;">Reprodução: </span>
        <span>Registro de dados de cobertura, gestação e 
              parto para monitorar desempenho reprodutivo.</span>
      </h5>
    </li>
    <li>
      <h5>
        <img src="{% static 'images/body/check.png' %}" alt="bodes">
        <span style="font-weight:600;">Seleção de Rebanho:</span>
        <span> Melhore seu plantel selecionando animais com critérios específicos.</span>
      </h5>
    </li>
  </ul>
</div>

效果对比 #

• 当前效果：
  
• 期望效果：
  

我曾通过创建div并定义各元素属性的方式实现了预期效果，但这种方式不仅不符合规范，还导致代码冗余。

解决方案 #

方案1：Flex布局（推荐） #

利用Flex轻松实现垂直居中，同时给图片添加水平间距，无需额外嵌套元素：

body .page-five ul li {
  list-style-type: none;
  display: flex;
  align-items: center; /* 实现垂直居中 */
  text-align: left;
  margin-left: 36px;
  margin-bottom: 16px; /* 可选：增加列表项之间的垂直间距 */
}

body .page-five ul li img {
  margin-right: 12px; /* 图片与文本的水平间距 */
}

body .page-five ul li h5 {
  flex: 1; /* 让文本区域占满剩余空间，自动换行 */
  margin: 0; /* 移除h5默认上下margin，避免破坏对齐 */
}

方案2：优化行内元素对齐 #

如果不想用Flex，调整vertical-align并清理默认样式：

body .page-five ul li img {
  vertical-align: middle;
  margin-right: 12px; /* 水平间距 */
}

body .page-five ul li h5 {
  margin: 0; /* 移除默认margin */
  line-height: 1.5; /* 可选：调整行高让对齐更自然 */
}

说明 #

• Flex布局适配性更强，是现代布局的首选方案；
• 移除h5的默认margin是解决对齐问题的关键，浏览器默认的标题边距会打乱垂直对齐效果；
• 两种方案都无需额外嵌套div，符合语义化规范，避免代码冗余。

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