Skip to main content
Tweeted twitter.com/StackOverflowPT/status/1000782682664685569
Correção no título
Link
Sam
  • 80,8mil
  • 22
  • 73
  • 128

Centraliza~ção Centralização perfeita de elementos usando o transform:translate <style>

adicionou 490 caracteres ao conteúdo; título editado
Fonte Link
Lucas Pletsch
  • 833
  • 4
  • 16
  • 39

Dá pra colocar vários estilos Centraliza~ção perfeita de Id em uma única tagelementos usando o transform:translate <style>

FizEm uma outra pergunta que fiz antes, um html comusuário me deu um css embutido contendo três estilos diferentes para três Ids. Porém não está funcionando. Teiteiexemplo de como eu poderia deixar perfeitamente centralizado um e tambémbotã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...

Não sei ao certo onde estou errando, seria na declaração desse style embutido? TeriaPelo que separareu vi na doc, o translate muda a posição de um estiloobjeto na tela a partir da multiplicação da matriz de idposição do objeto por Tag? Dá pra colocar vários estilos de classeum vetor. Nesse caso, preciso ter a informação da posição em parapixels pra poder fazer esse cálculo, e ter uma tag style?

A minha ideia era colocar três botões centralizados na telade 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>

Dá pra colocar vários estilos de Id em uma única tag <style>

Fiz um html com um css embutido contendo três estilos diferentes para três Ids. Porém não está funcionando. Teitei deixar um e também não funciona.

Não sei ao certo onde estou errando, seria na declaração desse style embutido? Teria que separar um estilo de id por Tag? Dá pra colocar vários estilos de classe em para uma tag style?

A minha ideia era colocar três botões centralizados na tela.

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>

Centraliza~ção perfeita de elementos usando o transform:translate <style>

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>
Fonte Link
Lucas Pletsch
  • 833
  • 4
  • 16
  • 39

Dá pra colocar vários estilos de Id em uma única tag <style>

Fiz um html com um css embutido contendo três estilos diferentes para três Ids. Porém não está funcionando. Teitei deixar só um e também não funciona.

Não sei ao certo onde estou errando, seria na declaração desse style embutido? Teria que separar um estilo de id por Tag? Dá pra colocar vários estilos de classe em para uma tag style?

A minha ideia era colocar três botões centralizados na tela.

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>