Alinhando texto e imagens em html

2 métodos:Alinhar o texto com HTMLAlinhar imagens com HTML

Para alinhar algo em HTML, os códigos adequados requerem o uso de "Cascading Style Sheets" (CSS, por sua sigla em Inglês). Mas nem todos os sites permitem que você personalize a folha de estilo para que possa alinhar corretamente as partes do seu site. Saiba como alinhar algo em HTML, de modo que é exibido como você quer, mesmo quando você não pode adicionar uma folha de estilo para o site para fazer isso. Esta técnica é chamada de CSS "alinhado".

método 1
Alinhar o texto com HTML
1
Coloque cada seção mudou alinhamento com o código "div". Isto significa que você precisa adicionar o código "div" no interior dos símbolos de "menor que" e "maior que" (lt; gt;) antes do primeiro código HTML que terá o seu alinhamento mudou, e adicionar o código "/ div" dentro destes símbolos após o último código HTML que mudaram sua programação.
  • 2
    Determina como necessário alterar o alinhamento do texto no código "div".
  • 3
    Se você precisa para alinhar o texto à esquerda, alterar o código "div" para o seguinte no interior dos símbolos "lt; gt;" div style = "text-align: left".
  • Se você precisa para alinhar o texto à direita, altere o código "div" para "div style = "text-align: right `" entre os símbolos "lt; gt;".
  • Se você precisa centro alinhar texto, altere o código "div" para "estilo div =" text-align: center `` entre os símbolos "lt; gt;".
  • Se você precisa para justificar o texto, altere o código "div" para "estilo div =" text-align: justify `` entre os símbolos "lt; gt;".
  • 4


    Salve as alterações.
  • 5
    Verifique a aparência do conteúdo para garantir que tudo está em ordem.
  • Se não, então o site tem um código específico na sua folha de estilo que substitui o código "div". Para substituir o site da folha de estilo que você terá que adicionar a versão apropriada do "" text-align: right "style =" dentro do código de cada item de abertura para ter seu alinhamento alterado. Por exemplo, um código de "p" se tornaria "" text-align: right `p style = "entre os símbolos" lt; gt; ".
  • 6


    Aprecie ver o texto alinhado exatamente como você queria.
    • método 2
    Alinhar imagens com HTML
    1
    Localizar o código HTML para a imagem que você deseja alinhar.


  • 2
    Editar o código "img" para adicionar o "float" correta (flutuante) propriedade.
  • Se você precisa a imagem é posicionado à esquerda, acrescenta "style =" float: left ` "para o código, como em" img style = "float: left` `entre os símbolos" lt; gt; ".
  • Se você precisa a imagem é posicionada à direita, acrescenta "style =" float: right "" o código, como em "img style =" float: right "entre os símbolos" lt; gt; ".
  • Se você precisa a imagem é posicionada no centro, o código é um pouco mais complicado. Não existe um "float: center" propriedade, então você tem que adicionar "`align: center-text-align: center "style =" o código, como em "img style = "align: center-text-align: center""Entre os símbolos "lt; gt;".
  • 3
    Guarde o seu código.
  • 4
    Desfrute as imagens alinhadas.

    • dicas

    • Talvez você tenha visto usar o código "p align =" center "(entre lt; gt;) para alterar o alinhamento do texto. Evite fazer isso porque ele é obsoleto, e é apenas uma questão de tempo antes que ele deixa de ser suportado na maioria dos navegadores.
    • As instruções para alinhar imagens com HTML, também lhe permitem alinhar as seções com HTML. Em torno do código da seção "div", e instruções sobre como alinhar texto com HTML. Adicione o "float" código de propriedade "div" como você faz para o código "img" nas direções de alinhamento das imagens.
    • Se o código não mostra a alteração corretamente, é possível que o site tem um filtro instalado para invalidar todos os códigos HTML. No entanto, também é possível que o código um ponto e vírgula, um símbolo de mais ou menos, uma aspa ou qualquer outra coisa que faz com que o código pode não funcionar em falta. Verificar isso, de saber com certeza se você está aplicando os códigos corretamente ou não.
    Artigos Relacionados