-3

Olá. Eu queria centralizar e alinhar o me H1 e H2 com a Imagem

<main>
<div class="divclass">
    <ul>
        <li>
           <div class="bike">
            <img src="img/bike.png" alt=""></div>
            <div class="cor"><h2>Vermelha</h2></div>
            <div class="preco"><h3>100</h3></div>
           </div>
        </li>
    </ul>
    </div>

</main>

</body>
</html>
2

1 Resposta 1

-1

Adicione o css

.bike {display: flex; justify-content: center}
.cor {display: flex; justify-content: center; width: 100%}
.preco {display: flex; justify-content: center; width: 100%}

O código completo ficaria

<!DOCTYPE html>
<html>

<head>
<style>
.bike {display: flex; justify-content: center; width: 100%}
.cor {display: flex; justify-content: center; width: 100%}
.preco {display: flex; justify-content: center; width: 100%}

</style>
</head>
<body>

<main>
<div class="divclass">
    <ul>
        <li>
           <div class="bike">
            <img src="img/bike.png" alt="imagem amostrada"></div>
            <div class="cor"><h2>Vermelha</h2></div>
            <div class="preco"><h3>100</h3></div>
           </div>
        </li>
    </ul>
    </div>

</main>

Ou você poderia ainda de forma mais simples colocar o css

li {display: flex; flex-direction: column; align-items: center}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .