Skip to main content
Correções no código
Fonte Link
Diego Marques
  • 3,7mil
  • 1
  • 10
  • 23

Não é possível utilizar mais de um id em um elemento, e por definição, um ID não deve se repetir em mais e um elemento em todo documento HTML, deve ser um identificador único para aquele elemento.

Para chegar neste resultado, você pode utilizar as classes (atributo class), onde é permitido utilizar mais de uma classe em um elemento e reutilizar a classe em mais de um elemento.

Seguindo seu exemplo:

.centralizado1 {
  position:absolute;
  top=46%;top: 46%;
  left=50%;left: 50%;
  transform: translate(-46%, -50%)
}
.centralizado2 {
  position:absolute;
  top=50%;top: 50%;
  left=50%;left: 50%;
  transform: translate(-50%, -30%)
}
.centralizado3 {
  position:absolute;
  top=54%;top: 54%;
  left=50%;left: 50%;
  transform: translate(-54%, -10%)
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <div class="centralizado1 centralizado2">
   <button>A</button>
  </div>
  <div class="centralizado2 centralizado3">
    <button>B</button>
  </div>
  <div class="centralizado3 centralizado2 centralizado1">
    <button>C</button>
  </div>
  <div class="centralizado3">
    <button>C</button>
  </div>
</body>
</html>

Não é possível utilizar mais de um id em um elemento, e por definição, um ID não deve se repetir em mais e um elemento em todo documento HTML, deve ser um identificador único para aquele elemento.

Para chegar neste resultado, você pode utilizar as classes (atributo class), onde é permitido utilizar mais de uma classe em um elemento e reutilizar a classe em mais de um elemento.

Seguindo seu exemplo:

.centralizado1 {
  position:absolute;
  top=46%;
  left=50%;
  transform:translate(-46%, -50%)
}
.centralizado2 {
  position:absolute;
  top=50%;
  left=50%;
  transform:translate(-50%, -30%)
}
.centralizado3 {
  position:absolute;
  top=54%;
  left=50%;
  transform:translate(-54%, -10%)
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <div class="centralizado1 centralizado2">
   <button>A</button>
  </div>
  <div class="centralizado2 centralizado3">
    <button>B</button>
  </div>
  <div class="centralizado3 centralizado2 centralizado1">
    <button>C</button>
  </div>
  <div class="centralizado3">
    <button>C</button>
  </div>
</body>
</html>

Não é possível utilizar mais de um id em um elemento, e por definição, um ID não deve se repetir em mais e um elemento em todo documento HTML, deve ser um identificador único para aquele elemento.

Para chegar neste resultado, você pode utilizar as classes (atributo class), onde é permitido utilizar mais de uma classe em um elemento e reutilizar a classe em mais de um elemento.

Seguindo seu exemplo:

.centralizado1 {
  position:absolute;
  top: 46%;
  left: 50%;
  transform: translate(-46%, -50%)
}
.centralizado2 {
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -30%)
}
.centralizado3 {
  position:absolute;
  top: 54%;
  left: 50%;
  transform: translate(-54%, -10%)
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <div class="centralizado1 centralizado2">
   <button>A</button>
  </div>
  <div class="centralizado2 centralizado3">
    <button>B</button>
  </div>
  <div class="centralizado3 centralizado2 centralizado1">
    <button>C</button>
  </div>
  <div class="centralizado3">
    <button>C</button>
  </div>
</body>
</html>

Fonte Link
Diego Marques
  • 3,7mil
  • 1
  • 10
  • 23

Não é possível utilizar mais de um id em um elemento, e por definição, um ID não deve se repetir em mais e um elemento em todo documento HTML, deve ser um identificador único para aquele elemento.

Para chegar neste resultado, você pode utilizar as classes (atributo class), onde é permitido utilizar mais de uma classe em um elemento e reutilizar a classe em mais de um elemento.

Seguindo seu exemplo:

.centralizado1 {
  position:absolute;
  top=46%;
  left=50%;
  transform:translate(-46%, -50%)
}
.centralizado2 {
  position:absolute;
  top=50%;
  left=50%;
  transform:translate(-50%, -30%)
}
.centralizado3 {
  position:absolute;
  top=54%;
  left=50%;
  transform:translate(-54%, -10%)
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <div class="centralizado1 centralizado2">
   <button>A</button>
  </div>
  <div class="centralizado2 centralizado3">
    <button>B</button>
  </div>
  <div class="centralizado3 centralizado2 centralizado1">
    <button>C</button>
  </div>
  <div class="centralizado3">
    <button>C</button>
  </div>
</body>
</html>