How to vertically align an image and text within a list?

Question

I'm trying to align an image vertically with the text inside an unordered list, but I couldn't get the elements that are inside the ordered list to align, i.e. align img with h5 and that there is a certain horizontal space.

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>

I managed to get the desired result by creating divs and defining the properties of each element, but this way besides being a bad practice my code got big.

Result I am getting:

Expected Result:

Your posted code doesn't seem to reproduce the problem you show in your image; this could be because your CSS doesn't seem to be accurate to the demo (there's no element in your posted HTML with a class of `page-five`, for example). Could you please correct that? — David Thomas, Jun 03 '23 at 22:18
The code I posted is what is generating the result. What is happening is that the code is inside a big project, I just took the code part and I confess that I didn't test it seperately. — Vanessa, Jun 03 '23 at 22:42
I do understand how that happens, but if your posted code doesn't reproduce the problem you describe it's hard for us to offer help. In this example, it would seem that linking to a real `` and correcting your CSS selectors would be an accurate-enough representation of the problem. — David Thomas, Jun 03 '23 at 22:49
Got it, next time I will put a code that can be reproduced. Thanks for the explanation. — Vanessa, Jun 03 '23 at 23:19

score 1 · Accepted Answer · answered Jun 03 '23 at 22:37

You can set an image for list-style instead.

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: 70px;
  padding: 20 10px;
  list-style: url('//upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Eo_circle_light-green_checkmark.svg/12px-Eo_circle_light-green_checkmark.svg.png');
}

body .page-five ul li {
  justify-content: center;
  align-items: center;
  text-align: left;
  margin-left: 36px;
}

<div class="page-five">
  <div class="card-1">
    <h2>Produção de ponta a ponta:</h2>
    <ul>
      <li>
        <h5>
          <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>
          <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>
          <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>
          <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>

How to vertically align an image and text within a list?

1 Answers1