Html 如何垂直对齐列表中的图像和文本

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>