Botao descentraliza ao ser clicado | HTML e CSS | Alura

Olá a todos, recentemente fiz um sistema básico, consegui. Porém, deixei o botão centralizado, entretanto, ao ser clicado ele volta a sua posição inicial. E gostaria de ajuda para solucionar esse problema.

Codigo HTML

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Atividede Bhaskara</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <main class = "card">
        <h1 class = "titulo-card" >Bhaskara atividade livro</h1>
        <div class = conteudo-card>

            <section class = "sessao1">
                <p>
                    <label for="valorA">Valor de A:</label>
                    <input type="text" id = "valorA">
                </p>
            </section>

            <section class = "sessao2">
                <p>
                    <label for="valorB">Valor de B:</label>
                    <input type="text" id = "valorB">
                </p>
            </section>

            <section class = "sessao3">
                <p>
                    <label for="valorC">Valor de C:</label>
                    <input type="text" id = "valorC">
                </p>
            </section>

            <section class = "sessao4">
                <input id = "btResposta" type = "button" value = "Mostrar valor">
                <h3 id = "valorFinal"></h3>

                <h3 id = "x1"></h3>
                <h3 id = "x2"></h3>
            </section>
        </div>
        <script src="./main.js"></script>
    </main>
</body>
</html>

CSS:

*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.card
{
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    width: auto;
}
.conteudo-card
{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;

}

JS:

function formula()
{
    let valorA = document.getElementById("valorA");
    let valorB = document.getElementById("valorB");
    let valorC = document.getElementById("valorC");
    let valorFinal = document.getElementById("valorFinal");
    let x1 = document.getElementById("x1")
    let x2 = document.getElementById("x2")

    let a = Number(valorA.value);
    let b = Number(valorB.value);
    let c = Number(valorC.value);
    let delta = ((b*b) - (4*a*c));

    if(delta >= 0)
    {
        valorFinal.textContent = "Valor de delta é: " + delta;

        let bhaskara1 = (-b) + (Math.sqrt(delta)) / 2*a;
        let bhaskara2 = (-b) - (Math.sqrt(delta)) / 2*a;

        x1.textContent = "x1 é igual a: " + bhaskara1;
        x2.textContent = "x2 é igual a: " + bhaskara2;
    }
    else
    {
        valorFinal.textContent = "Delta é negativo, não há como proceder o calculo"
    }


}

let btResposta = document.getElementById("btResposta");
btResposta.addEventListener("click", formula);

Olá Jeremias, tudo bem?

Peço desculpas pela demora em obter um retorno

Para resolvermos essa sua questão podemos adicionar uma seguinte class ao css:

section {
  display:flex ;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  position: relative;
  align-items: center; 
}

Esse código CSS aplica estilos a um elemento <section> com o objetivo de centralizar seu conteúdo verticalmente e horizontalmente. Ele utiliza as propriedades display: flex; para criar um container flexível, flex-direction: column; para empilhar os elementos filhos em uma coluna, justify-content: center; para alinhar verticalmente ao centro, text-align: center; para centralizar o conteúdo de texto, position: relative; para definir a posição relativa e align-items: center; para alinhar horizontalmente ao centro. Essas propriedades combinadas criam um layout centralizado para o conteúdo dentro do section.

Espero ter ajudado, qualquer dúvida, me coloco à disposição! Bons estudos!

Sucesso

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!

Mergulhe em programação