centralizar botão

28/03/2020

7

olá galera, fiz um codigo basico em HTML, CSS E JAVASCRIPT para calcular o resto da divisão, porém não consegui centralizar o botão "calcular resto" como eu faço (obs sou novo em programação)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Resto Da Divisão</title>
</head>
<body>
<style>
body {
background: brown;
}
header {
font: 25pt times;
text-align: center;
color: white;
}
section {
background: white;
border-radius: 10px;
padding: 15px;
width: 600px;
margin: auto;
}
button {
background: brown;
color: white;
border-radius: 15px;
width: 150px;
height: 30px;
}
div {
width: 400px;
height: 50px;
}
</style>
<header>
Calculadora online de resto da divisão
</header>
<section>
<p>Basta digitar os números e clicar em "Calcular Resto", Lembrando que não funciona para
numeros fracionarios
</p>
<p>Qual é o resto da divisão de
<input type="number" name="" id="txt"> por
<input type="number" name="" id="txt2">
</p>

<p><button onclick="calc()">Calcular Resto</button></p>

<div id="res"></div>
</section>

<script>
function calc() {
var txt = Number(document.querySelector("input#txt").value);
var txt2 = Number(document.querySelector("input#txt2").value);
var res = document.querySelector("div#res");

if (txt == 0 || txt2 == 0) {
alert("[ERRO] verifique os dados e tente novamente");
} else {
var valor = parseInt(document.querySelector("input#txt").value);
var valor2 = parseInt(document.querySelector("input#txt2").value);

var resto = valor % valor2;
var divisao = valor / valor2;

res.innerHTML = `O resto da divisão de $ por $ = $ <br>
O resultado da divisão de $ / $ = ${divisao.toFixed(2)}`
}

}
</script>
</body>
</html>
Responder

Posts

28/03/2020

João Rolim

olá galera, fiz um codigo basico em HTML, CSS E JAVASCRIPT para calcular o resto da divisão, porém não consegui centralizar o botão "calcular resto" como eu faço (obs sou novo em programação)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Resto Da Divisão</title>
</head>
<body>
<style>
body {
background: brown;
}
header {
font: 25pt times;
text-align: center;
color: white;
}
section {
background: white;
border-radius: 10px;
padding: 15px;
width: 600px;
margin: auto;
}
button {
background: brown;
color: white;
border-radius: 15px;
width: 150px;
height: 30px;
}
div {
width: 400px;
height: 50px;
}
</style>
<header>
Calculadora online de resto da divisão
</header>
<section>
<p>Basta digitar os números e clicar em "Calcular Resto", Lembrando que não funciona para
numeros fracionarios
</p>
<p>Qual é o resto da divisão de
<input type="number" name="" id="txt"> por
<input type="number" name="" id="txt2">
</p>

<p><button onclick="calc()">Calcular Resto</button></p>

<div id="res"></div>
</section>

<script>
function calc() {
var txt = Number(document.querySelector("input#txt").value);
var txt2 = Number(document.querySelector("input#txt2").value);
var res = document.querySelector("div#res");

if (txt == 0 || txt2 == 0) {
alert("[ERRO] verifique os dados e tente novamente");
} else {
var valor = parseInt(document.querySelector("input#txt").value);
var valor2 = parseInt(document.querySelector("input#txt2").value);

var resto = valor % valor2;
var divisao = valor / valor2;

res.innerHTML = `O resto da divisão de $ por $ = $ <br>
O resultado da divisão de $ / $ = ${divisao.toFixed(2)}`
}

}
</script>
</body>
</html>


Fala, Matheus!

Existem várias formas de fazer... Vou exemplificar 1.
Você pode adicionar o seguinte código no seu "css":
section p:nth-child(3) {
  text-align: center;
}


Só uma observação: No HTML, as tags "<style> </style>" devem ficar dentro do "<head> </head>".
Exemplo:
<!DOCTYPE html>
<html>
<head>
    <style>
       body {
         background-color: linen;
       }

       h1 {
         color: maroon;
         margin-left: 40px;
       }
    </style>
</head>
<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
</body>
</html>


Espero ter ajudado! ;)
Responder

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários. Para saber mais sobre o uso de cookies,
consulte nossa política de privacidade. Ao continuar navegando em nosso site, você concorda com a nossa política.

Aceitar