Como Alinhar Algo em HTML

Baixe em PDF
Coescrito por Jessica Andzouana

Baixe em PDF

A codificação correta requer o uso de CSS (do Inglês, Cascading Style Sheets, ou, em Português, Folhas de Estilo em Cascata) para alinhar coisas em HTML, mas nem todos os sites permitem que você customize as folhas de estilo para alinhar da maneira correta partes de sua página da web. Descubra como alinhar algo em HTML para aparecer da maneira que deseja, mesmo quando não puder adicionar uma folha de estilo ao site para fazer isso. Esta técnica é chamada de CSS "inline".

Método 1
Método 1 de 2:

Alinhe Texto com HTML

Baixe em PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/82\/Align-Something-in-HTML-Step-1-Version-5.jpg\/v4-460px-Align-Something-in-HTML-Step-1-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/82\/Align-Something-in-HTML-Step-1-Version-5.jpg\/v4-728px-Align-Something-in-HTML-Step-1-Version-5.jpg","smallWidth":460,"smallHeight":344,"bigWidth":728,"bigHeight":544,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Isto significa que é necessário adicionar "div" dentro dos símbolos de "menor que" (<) e "maior que" (>) antes do primeiro marcador HTML que terá seu alinhamento mudado.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/0f\/Align-Something-in-HTML-Step-2-Version-5.jpg\/v4-460px-Align-Something-in-HTML-Step-2-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/0f\/Align-Something-in-HTML-Step-2-Version-5.jpg\/v4-728px-Align-Something-in-HTML-Step-2-Version-5.jpg","smallWidth":460,"smallHeight":344,"bigWidth":728,"bigHeight":545,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/eb\/Align-Something-in-HTML-Step-3-Version-5.jpg\/v4-460px-Align-Something-in-HTML-Step-3-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/eb\/Align-Something-in-HTML-Step-3-Version-5.jpg\/v4-728px-Align-Something-in-HTML-Step-3-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    div style='text-align:left'.
    • Se precisar alinhar o texto para a direita, mude a tag "div" para "div style='text-align:right'" dentro dos símbolos "<>".
    • Se precisar alinhar o texto para o meio, mude a tag "div" para "div style='text-align:center'" dentro dos símbolos "<>".
    • Se for necessário justificar o texto, mude a tag "div" para "div style='text-align:justify'" dentro dos símbolos "<>".
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/7b\/Align-Something-in-HTML-Step-4-Version-5.jpg\/v4-460px-Align-Something-in-HTML-Step-4-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/7b\/Align-Something-in-HTML-Step-4-Version-5.jpg\/v4-728px-Align-Something-in-HTML-Step-4-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/09\/Align-Something-in-HTML-Step-5-Version-5.jpg\/v4-460px-Align-Something-in-HTML-Step-5-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/09\/Align-Something-in-HTML-Step-5-Version-5.jpg\/v4-728px-Align-Something-in-HTML-Step-5-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    • Se não funcionou, então o site possui uma codificação específica em sua folha de estilos que substitui seu "div". Substitua a folha de estilos daquele site adicionando a versão apropriada de "style='text-align:right'" dentro da tag de abertura de cada elemento, para que seu alinhamento seja modificado. Por exemplo, uma tag "p" se tornaria "p style='text-align:right'" dentro dos símbolos "<>".
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/c9\/Align-Something-in-HTML-Step-6-Version-5.jpg\/v4-460px-Align-Something-in-HTML-Step-6-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/c9\/Align-Something-in-HTML-Step-6-Version-5.jpg\/v4-728px-Align-Something-in-HTML-Step-6-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Publicidade
Método 2
Método 2 de 2:

Alinhar Imagens com HTML

Baixe em PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/59\/Align-Something-in-HTML-Step-7-Version-5.jpg\/v4-460px-Align-Something-in-HTML-Step-7-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/59\/Align-Something-in-HTML-Step-7-Version-5.jpg\/v4-728px-Align-Something-in-HTML-Step-7-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/a3\/Align-Something-in-HTML-Step-8-Version-5.jpg\/v4-460px-Align-Something-in-HTML-Step-8-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/a3\/Align-Something-in-HTML-Step-8-Version-5.jpg\/v4-728px-Align-Something-in-HTML-Step-8-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    • Se precisa que a imagem fique à esquerda, adicione "style='float:left'" à tag, para que fique "img style='float:left'", dentro dos símbolos "<>".
    • Se precisar que a imagem fique à direita, adicione "style='float:right'" à tag, para que fique "img style='float:right'" dentro dos símbolos "<>".
    • Se precisar que a imagem fique no centro, o código é um pouco mais complicado. Não existe a propriedade "float:center", portanto, você precisa adicionar "style='align:center;text-align:center'" à tag, para que fique "img style='align:center;text-align:center'", novamente com os símbolos "<>".
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/73\/Align-Something-in-HTML-Step-9-Version-5.jpg\/v4-460px-Align-Something-in-HTML-Step-9-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/73\/Align-Something-in-HTML-Step-9-Version-5.jpg\/v4-728px-Align-Something-in-HTML-Step-9-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/ae\/Align-Something-in-HTML-Step-10-Version-5.jpg\/v4-460px-Align-Something-in-HTML-Step-10-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/ae\/Align-Something-in-HTML-Step-10-Version-5.jpg\/v4-728px-Align-Something-in-HTML-Step-10-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Publicidade

Dicas

  • Você pode ter visto a tag "p align='center'" (dentro de <>) sendo usada para mudar o alinhamento do texto. Evite-a, pois ela está desatualizada, e é apenas questão de tempo para que os principais navegadores parem de dar suporte a ela.
  • As instruções de como alinhar imagens com HTML também irão permitir a você alinhar seções com HTML. Cerque a seção com as marcações "div", como nas instruções de como alinhar texto com HTML. Adicione a propriedade "float" tanto nas tags "div", como nas tags "img", nos direcionamentos de alinhamento de imagem.
  • Se o código não for mostrado corretamente de maneira alguma, é possível que o site possua um filtro, para tirar qualquer codificação HTML. No entanto, também é possível que falte um ponto e vírgula, um sinal de "maior que", ou "menor que", ou aspas em sua codificação, e qualquer um que faltar evitará que seu código funcione. Verifique isto, particularmente se algum código está sendo aplicado corretamente em alguns lugares e não em outros.
Publicidade

WikiHows Relacionados

Como
Criar um Link de Imagem em HTML
Como
Criar uma Página Simples da Web com HTML
Como
Inserir Uma Linha em HTML
Como
Criar Uma Página Web Simples com o Bloco de Notas
Como
Verificar a Versão do PHP
Como
Redirecionar um URL
Como
Esconder um Link em HTML
Como
Adicionar Comentários em um Código HTML
Como
Adicionar um Hiperlink com HTML
Como
Fazer um Texto Piscar com HTML
Como
Aprender HTML
Como
Criar um Plano de Fundo Transparente Usando o Pixlr
Publicidade

Referências

  1. http://www.w3schools.com/tags/att_p_align.asp
  2. http://www.w3schools.com/tags/att_img_align.asp
  3. http://www.w3schools.com/CSS/css_howto.asp

Sobre este guia wikiHow

Em outras línguas
Esta página foi acessada 241 966 vezes.

Este artigo foi útil?

Publicidade