Why doesn’t my button line up at the center?

Asked

Viewed 49 times

-4

I want to know why my "button" with the class="botaoHpr" is not aligned with the h3 and in the middle of the page. (NOTE: is a simple site and this HPR is a group of my and my friends) 

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>

html css

  • Do not use . or # to name classes, even if it is allowed in HTML in CSS it is not. Then in HTML change the class attribute botão.h3 for botãoh3 and in CSS create rule .botãoh3 { display: grid; justify-content: center; } remembering that this is an alternative of many possible and that if the question explained/detailed what and how it hoped to manipulate the rendering boxes could arise one or more surprising answers.

  • Thank you very much! I was coding for Vscode

1 answer

-1


Attention to names in class’s. Accents, dots and other characters should not be used. Only _ or - is the nominee. I changed the class name and composed the css in the 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

    Thanks aew man!... I’ll try my code and see if it works, but if it didn’t work out, I’ll thank you already

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.