3

Em uma outra pergunta que fiz antes, um usuário me deu um exemplo de como eu poderia deixar perfeitamente centralizado um botão html na tela.

Foi nesta pergunta: Como posicionar um button em qualquer lugar da tela, em html

Ele simplesmente fez:

#centralizar{
    position:absolute; 
    top:50%;
    left:50%;
    transform: translate(-50%, -50%)
}

Só que eu tentei centralizar três botões abaixo, partindo do mesmo padrão, mas não funciona...

Pelo que eu vi na doc, o translate muda a posição de um objeto na tela a partir da multiplicação da matriz de posição do objeto por um vetor. Nesse caso, preciso ter a informação da posição em pixels pra poder fazer esse cálculo, e ter uma ideia de qual o valor de translate aplicar, certo? Ou tem um jeito mais fácil.

Segue o meu código:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
    #centralizado1 {position:absolute; top=46%; left=50%; transform:translate(-46%, -50%)}
    #centralizado2 {position:absolute; top=50%; left=50%; transform:translate(-50%, -50%)}
    #centralizado3 {position:absolute; top=54%; left=50%; transform:translate(-54%, -50%)}  
</style> 

<body>

<div id="centralizado1">
       <button >A</button>
</div>

<div id="centralizado2">
     <button>B</button>
</div>

<div id="centralizado3">
       <button>C</button
</div>

</body>
</html>
5
  • 4
    Você inventou um "=" na declaração que não existe. Leia a documentação e exemplos existentes aos montes - Estamos aqui para tirar dúvidas, mas é bom ao menos dar uma lida na documentação, sem tentar "no chute" e já perguntar.
    – Largato
    Commented 12/04/2018 às 19:45
  • Não percebi isso. Eu estava usando dois exemplos, e não percebi o "igual instruso". Commented 12/04/2018 às 19:48
  • Aproveite e acrescente um tamanho numa div mais externa, para ver melhor o efeito. Se conseguir resolver, pode publicar no campo abaixo a solução, para poder fechar a pergunta. Eu até pensei em postar uma resposta com o código corrigido, mas não sei ao certo como é o resultado pretendido. Um exemplo do que quer (em imagem, por exemplo, ou uma descrição do resultado) ajudaria.
    – Largato
    Commented 12/04/2018 às 19:49
  • Apareceu outro problema. Bou editar a pergunta Commented 12/04/2018 às 19:50
  • Publiquei um modelo básico mais simplificado como ponto de partida.
    – Largato
    Commented 12/04/2018 às 19:59

2 Respostas 2

6

Seguem algumas correções e simplificações, em "ordem de aparição":

  • Removido o erro de sintaxe da pergunta original, tinha um = sobrando nas declarações;
  • Adicionada largura, altura, e removidas as margens do body e html para a página ocupar a área visível;
  • Adicionado relative ao body para acomodar a base para o absolute dos filhos (na verdade, isso é importante quando se trata de div dentro de div;
  • Centralizada apenas uma div, já com os 3 botões;
  • Fechada a tag <head>;
  • Simplificada a div que contém os botões;

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      body, html {
        padding:0;
        margin:0;
        width:100%;
        height:100%;
        position:relative;
      }
      #centralizado {
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
      }
  </style> 
  </head>
  <body>
    <div id="centralizado">
      <button>A</button>
      <button>B</button>
      <button>C</button>
    </div>
  </body>
</html>

5
  • Entendi. Mas se você passou para os três botões as mesmas coordenadas da tela, como eles não ficaram sobrepostos? Commented 12/04/2018 às 20:07
  • 1
    eu passei coordenadas pra div que está fora deles. Eles se "ajeitam" dentro dessa div. Pensando de outra forma: você não quer posicionar CADA botão, e sim um conjunto deles. Para isso, uma div em volta. - Experimente aumentar ou diminuir o número de botões, por exemplo pondo 9 botões com um <br> a cada 3 deles e vai ver que sempre centraliza - e centraliza no 100% que eu pus no body
    – Largato
    Commented 12/04/2018 às 20:08
  • Ah, claro. Então por padrão, a div "enfilera" os elementos contidos nela da esquerda para direita? Commented 12/04/2018 às 20:09
  • 1
    Em línguas ocidentais é da esquerda pra direita, mas se vc quebrar com <br> vai continuar centralizado. Virou uma "caixa elástica" como fizemos
    – Largato
    Commented 12/04/2018 às 20:10
  • 1
    Um bom exercício é você começar do HTML puro, e ir pondo cada regra do CSS que eu coloquei pra ver o efeito isolado de cada uma
    – Largato
    Commented 12/04/2018 às 20:12
0

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>

0

Você deve fazer log-in para responder a esta pergunta.

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