-4

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>

2
  • Não use . ou # para nomear classes, mesmo que seja permitido em HTML em CSS não é. Então no HTML mude o atributo da classe botão.h3 para botã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. Commented 13/07/2021 às 7:51
  • Muito obrigado! eu estava codando pelo VSCode
    – Doodods
    Commented 13/07/2021 às 15:20

1 Resposta 1

-1

Atenção aos nomes nas class's. Acentos, pontos e outros caracteres não devem ser usados. Somente _ ou - é o indicado. Alterei o nome da class e compus o css na class .botao_h3

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;
}
.botao_h3{
  display: flex;
  flex-flow:column;
}
<!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="botao_h3">
    <H3>Entre na HPR</H3>
    <button href="https://www.youtube.com/watch?v=MrhDr-11rrw" class="botaoHpr">HPR</button>
  </div>
</body>

</html>

1
  • 1
    Valeu aew man!... vou tentar no meu código e ver se deu certo, mas se não tiver dado certo, eu já agradeço
    – Doodods
    Commented 13/07/2021 às 15:22

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