17 de novembro de 2007

O segredo de centralizar com css

Uma tarefa comum na criação de sites é a de centralizar textos ou imagens. Com CSS há 2 formas de fazer isso. Uma dessas duas técnicas é para centralizar elementos inline, como <q> e <em>. A segunda técnica é para centralizar elementos de bloco, como <div> e <h1>.


Centralizar elementos inline



O text-align é a propriedade que define o alinhamento de qualquer elemento inline ou qualquer texto que estiver dentro de elementos de bloco, como o <p<. Os valores do text-align são: right, para alinhar na direita; left, para alinhar na esquerda; justify, para deixar o justificado (aquele do Word, sabe?); e center, para centralizar. Observe o exemplo:

p { text-align: center; }

Centralizar imagens e elementos de bloco



Esta é a mesma técnica usada para centralizar uma página. A propriedade margin definida para "0 auto" indica que as margens superiores e inferiores do seletor serão de 0 (pode ser outro valor, 0 foi só um exemplo) ; e as margens da direita e esquerda serão "automátcias", ou seja, o browser irá calcular o espaço que o seletor está ocupando e dividirá por 2 ,centralizando o elemento.

p, img {
margin: 0 auto;
width: 10px;
}

Referencias:
CSS: centering things

Tags:

7 comentários:

Elisio F Borges disse...

Como posso centralizar todas as imagens que carrego na barra lateral através do recurso " adicionar elemento na página " ?.
Este recurso oferece a opção de carregar imagem do seu "computador" ou da "web"..
tags não podem ser utilizadas através desse recurso de upload !
Muito obrigado por seu temo e atenção !

borges.elisio@gmail.com

Guido disse...

Olá Elisio

Se eu entendi bem, é só você editar o css com o seletor #Image1_img . Ai você usa a técnica que tá explicada nesse post com esse seletor, no blogger na seção "Editar HTML".

Abraços.

Elisio F Borges disse...

Olá Guido:

Pois é.. devo explicitamente assumir que sou uma "zebra" neste assunto. Não faço a menor idéia do que seja CSS ?!.. Por aí vc pode entender a dificuldade que vc terá pra permitir que eu interaja com suas dicas.

Vou deixar aqui o meu "blog".... < www.merkatto.blogspot.com> que eu mesmo estou tentando construir. As ferramentas oferecidas são bastante amigáveis e assim, a passo de tartaruga vou progredindo. Hoje, sinto-me mais solto. Mas... ainda estou longe de poder viver disso.

Vc verá que na barra lateral ( sidebar ) eu inseri várias imagens para ilustrar as categorias de assunto. Essas imagens as baixo da internet, em tamanho reduzido, e vou ao pinel de controle do blog.. clico em "layout da página", na sequência opto por algo como "adicionar novo elemento a pag".. então inserir imagens.. e opto por imagens do meu computador... Tudo funciona redondo ! Só não sei como colocá-las no centro da barra lateral pra que dê um aspecto mais equilibrado, harmonizado.

Cheguei até a estudar alguns passos para principiantes em HTML.. aprendi algumas tags como as de centralizar, etc.. mas, nesta plataforma ? Plataforma ?.. é assim que se fala ?.., não sei como aplicá-las.

Desculpe-me. Só retornei porque vc deixou a porta aberta em caso de dúvidas.

Um grande abraço e obrigado por sua generosidade.

Elísio

Guido disse...

Elisio,

quando você entrar no seu blog, vá ao painel de controle dele, clique em "Layout" depois em "Editar HTML".

Dentro da parte de css (onde tem uns "comandos" entre chaves {}) aperte enter depois de um desses "comandos" e adicione isso:

div.widget-content img {
margin: 0 auto;
}

Clique em "Visualizar" e se funcionar, clique em "Salvar Modelo", se não funcionar comente aqui de novo.

Abraços. :)

Walter disse...

nao funcionou no ie8...

assim da certo:

#centraliza{
position: relative;
float: left;
width: 980px;
left: 50%;
margin-left: -490px;
}

abçs

Fernando disse...

O problema maior é se não souber o tamanho da imagem.. ou se tiver várias imagens com largura diferentes..

Nesse caso, tem que atribuir

img {
display: block;
margin: 0 auto;
}

Solução Cross browser.

.

MARCIANO disse...
Este comentário foi removido pelo autor.