A colocação de itens em uma página da web é essencial para o design geral. Embora existam outras maneiras de influenciar o layout, como usar tabelas (que não recomendamos), o melhor é usar CSS.
Abaixo, vamos dar uma olhada em como usar uma propriedade simples de estilo CSS para alinhar imagens, tabelas, parágrafos e muito mais.
Nota: Esses mesmos métodos podem ser usados em folhas de estilos externas também, mas como esses itens se aplicam a itens individuais e provavelmente precisam permanecer assim, é melhor usar estilos in-line como os mencionados abaixo.
Alinhar parágrafos de texto
A tag de parágrafo é o primeiro lugar para começar a colocar a sua página web. As tags de abertura e fechamento são assim:
O alinhamento padrão do texto em um parágrafo está à esquerda da página, mas você também pode alinhar seus parágrafos à direita e ao centro.
Usar a propriedade float permite alinhar parágrafos à direita ou à esquerda do elemento pai. Quaisquer outros elementos dentro desse elemento pai fluirão ao redor do elemento flutuante.
Para obter o melhor efeito com um parágrafo, é melhor definir uma largura no parágrafo menor que o elemento contêiner (pai).
Alinhar os parágrafos dentro do texto
Indiscutivelmente, o alinhamento mais interessante para o texto do parágrafo é "justificar", que diz ao navegador para exibir o texto alinhado, essencialmente, para ambos os lados direito e esquerdo da janela.
Para justificar o texto em um parágrafo, você usaria a propriedade text-align.
Você também pode alinhar todo o texto dentro de um parágrafo à direita ou à esquerda (o padrão), usando a propriedade text-align.
A propriedade text-align irá alinhar o texto dentro do elemento. Tecnicamente, não é necessário alinhar as imagens contidas no parágrafo ou em outro elemento, mas a maioria dos navegadores trata as imagens como inline para essa propriedade.
Alinhando Imagens
Usando a propriedade float em uma tag de imagem, você pode definir o posicionamento das imagens na página e como o texto irá envolvê-las.
Assim como os parágrafos acima, a propriedade de estilo flutuante na tag de imagem posicionará sua imagem na página e dirá ao navegador como fluir o texto e outros elementos em torno dessa imagem.
O texto que segue a tag de imagem acima fluirá ao redor da imagem à direita enquanto a imagem é exibida à esquerda da tela.
Se eu quiser que o texto pare de envolver a imagem, eu uso a propriedade clear:
Alinhando mais que parágrafos
No entanto, e se você quiser alinhar mais do que apenas um parágrafo ou uma imagem? Você poderia simplesmente colocar uma propriedade de estilo em cada parágrafo, mas há uma tag que você pode usar e que é mais eficaz:
Simplesmente coloque o texto e as imagens (incluindo tags HTML) com a tag e a propriedade style (float ou text-align) e tudo nessa divisão será alinhado como você gostaria.
Tenha em mente que alinhamentos adicionados a parágrafos ou imagens dentro da divisão serão honrados, substituindo a tag.
