- Postagens: 15
- Obrigados Recebidos: 0
[RESOLVIDO] Centralizar logo
15 anos 1 semana atrás #39582
por Galpao Missioneiro
Galpao Missioneiro created the topic: [RESOLVIDO] Centralizar logo
Olá
Andei pesquizando no fórum mas ainda não encontrei o que realmente procuro.
EU quero deixar o logo do Joomla! centralizado, tentei de diversas formas mas ainda não consegui.
Esta assim:
Quero deixar assim:
Se já tem algum topico no forum resolvendo este assunto por favor me desculpem e me indiquem o link pois eu n encontrei.
Abraços e obrigado!
Andei pesquizando no fórum mas ainda não encontrei o que realmente procuro.
EU quero deixar o logo do Joomla! centralizado, tentei de diversas formas mas ainda não consegui.
Esta assim:
Quero deixar assim:
Se já tem algum topico no forum resolvendo este assunto por favor me desculpem e me indiquem o link pois eu n encontrei.
Abraços e obrigado!
15 anos 1 semana atrás #39585
por BruninhuViP
BruninhuViP replied the topic: Re: Centralizar logo
Por Diego Eis
Objeto no centro da tela
Uma das dúvidas mais freqüentes é esta: Como fazer para que um objeto fique no centro da tela usando css?
A resposta está nos passos abaixo!
Colocando a imagem:
Neste exemplo vamos usar uma imagem, mas você pode perfeitamente usar um div, o processo é o mesmo.
Coloque na imagem (ou no div) um nome de ID… Colocamos neste exemplo o ID com nome “centro”.
Definindo as dimensões do objeto:
Agora, no css, defina as dimensões do objeto (imagem ou div).
Nossa imagem tem 100 x 100 px’s, então vamos definir no css que a largura será de 100px (width:100px;) e que a altura também será de 100px (height:100px;).
Alinhando:
Estamos quase no final, você pode perceber que o objeto está um pouco desalinhado do centro. Vamos agora posicioná-lo… É aqui começa o truque.
Defina para nosso objeto, uma posição absoluta (position:absolute;), ele deverá ficar a 50% de distância do topo (top:50%
e 50% de distância do lado esquerdo do documento (left:50%.
O css não usa o centro do objeto como referência para o posicionamento, mas sim as extremidades, portanto, o que ficará no centro depois deste código, será o canto esquerdo superior do objeto.
O grande final:
Eis o truque para tirar a diferença, não é nada de outro mundo.
Você irá definir ao objeto duas margens negativas… a margem do topo (margin-top) e a margem da esquerda (margin-left). Na margem do topo, você simplesmente colocará um valor negativo, este valor será a metade da altura do objeto, neste caso, será -50px (margin-top:-50px;) e no lado esquerdo você fará a mesma coisa, mas o valor será a metade da largura do objeto, neste caso -50px (margin-left:-50px;).
ajuda?
Objeto no centro da tela
Uma das dúvidas mais freqüentes é esta: Como fazer para que um objeto fique no centro da tela usando css?
A resposta está nos passos abaixo!
Colocando a imagem:
Neste exemplo vamos usar uma imagem, mas você pode perfeitamente usar um div, o processo é o mesmo.
Coloque na imagem (ou no div) um nome de ID… Colocamos neste exemplo o ID com nome “centro”.
<img src=”imagem.gif” id=”centro” />Definindo as dimensões do objeto:
Agora, no css, defina as dimensões do objeto (imagem ou div).
Nossa imagem tem 100 x 100 px’s, então vamos definir no css que a largura será de 100px (width:100px;) e que a altura também será de 100px (height:100px;).
#centro {
width:100px;
height:100px;
}Alinhando:
Estamos quase no final, você pode perceber que o objeto está um pouco desalinhado do centro. Vamos agora posicioná-lo… É aqui começa o truque.
Defina para nosso objeto, uma posição absoluta (position:absolute;), ele deverá ficar a 50% de distância do topo (top:50%
e 50% de distância do lado esquerdo do documento (left:50%.O css não usa o centro do objeto como referência para o posicionamento, mas sim as extremidades, portanto, o que ficará no centro depois deste código, será o canto esquerdo superior do objeto.
#centro {
width:100px;
height:100px;
position:absolute;
top:50%;
left:50%;
}O grande final:
Eis o truque para tirar a diferença, não é nada de outro mundo.
Você irá definir ao objeto duas margens negativas… a margem do topo (margin-top) e a margem da esquerda (margin-left). Na margem do topo, você simplesmente colocará um valor negativo, este valor será a metade da altura do objeto, neste caso, será -50px (margin-top:-50px;) e no lado esquerdo você fará a mesma coisa, mas o valor será a metade da largura do objeto, neste caso -50px (margin-left:-50px;).
#centro {
width:100px;
height:100px;
position:absolute;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-50px;
}ajuda?