此问题已在此处有答案：

Li item on two lines. Second line has no margin（8个回答）
Label text is wrapped but not indent second line（5个答案）
3天前关闭。
我试图将图像与无序列表中的文本垂直对齐，但我无法将有序列表中的元素对齐，即将img与h5对齐，并且存在一定的水平空间。

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;
}

<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并定义每个元素的属性，我设法得到了想要的结果，但是这种方式除了是一种不好的做法之外，我的代码变得很大。
我得到的结果：

预期结果：