Alinhar no centro com Tansform
05/05/2017
0
Eu tinha visto uma vez um código que eles alinhavam no centro com o transform, mas não sei direito como funciona, alguém saberia me ajudar?
Dayan Barros
Curtir tópico
+ 0
Responder
Post mais votado
05/05/2017
Fala ae cara,
Você pode fazer isso usando as propriedades left e translate baseadas em porcentagem, por exemplo:
Dá uma testada aí, abraaço!
Você pode fazer isso usando as propriedades left e translate baseadas em porcentagem, por exemplo:
<style>
.container {
display: block;
background-color: green;
position: relative;
width: 100px;
height: 100px;
left: 50%;
transform: translateX(-50%);
}
</style>
<div class="container"></div>
Dá uma testada aí, abraaço!
Raphael Alves
Responder
Mais Posts
08/05/2017
Dayan Barros
Então se eu for utilizar no top ou bottom para alinhar na vertical, também funciona?
Abs
Abs
Responder
09/05/2017
Raphael Alves
Então se eu for utilizar no top ou bottom para alinhar na vertical, também funciona?
Abs
Abs
Funciona sim, mas você teria que usar "translateY" ao invés do "X", ou até mesmo usar "transform: translate(0%, -50%);" que serve tanto pro eixo X quanto pro eixo Y.
Abraaço.
Responder
12/05/2017
Dayan Barros
Então se eu for utilizar no top ou bottom para alinhar na vertical, também funciona?
Abs
Abs
Funciona sim, mas você teria que usar "translateY" ao invés do "X", ou até mesmo usar "transform: translate(0%, -50%);" que serve tanto pro eixo X quanto pro eixo Y.
Abraaço.
Muito obrigado, eu uso o flexbox geralmente, mas tem vezes que não tenho o height da div e acabo não conseguindo centralizar. Como esse usa position absolute, vi que dava.
Show de bolaaaaa!!!
Responder
Clique aqui para fazer login e interagir na Comunidade :)