Quero saber o porque meu "button" com a class="botaoHpr"
não fica alinhado com o h3
e no meio da página. (OBS: é um site simples e esse HPR é de um grupo meu e de amigos meus)
button {
border-style: solid;
border-color: indigo;
padding: 10px;
width: 150px;
height: 50px;
display: inline-block;
margin: 10px;
cursor: pointer;
border-radius: 4px;
margin: 0 auto;
text-align: center;
}
h3 {
color: black;
font-size: 20px;
font-family: Arial;
text-align: center;
}
body {
background-color: lightblue;
}
<!DOCTYPE html>
<html lang="pt">
<meta name="viewport" content="width=device=width,initial-scale=1">
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<style>
</style>
<head>
<title>
HPR
</title>
</head>
<body>
<div class="botão.h3">
<H3>Entre na HPR</H3>
<button href="https://www.youtube.com/watch?v=MrhDr-11rrw" class="botaoHpr">HPR</button>
</div>
</body>
</html>
.
ou#
para nomear classes, mesmo que seja permitido em HTML em CSS não é. Então no HTML mude o atributo da classebotão.h3
parabotãoh3
e no CSS crie a regra.botãoh3 { display: grid; justify-content: center; }
lembrando que essa é uma alternativa de muitas possíveis e que se na pergunta explicasse/detalhasse o que e como esperava manipular as caixas de renderização poderia surgir uma ou mais respostas surpreendentes.