Contente
- Alinhar parágrafos de texto
- Alinhar o texto dentro dos parágrafos
- Alinhando imagens
- Alinhando mais do que parágrafos
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, veremos como usar uma propriedade in-line simples de estilo CSS para alinhar imagens, tabelas, parágrafos e muito mais.
Esses mesmos métodos também podem ser usados em folhas de estilo externas, mas, como se aplicam a itens individuais e provavelmente precisam permanecer assim, é melhor usar o estilo em linha, como o mencionado abaixo.
Alinhar parágrafos de texto
A tag de parágrafo é o primeiro lugar para começar a disposição da sua página da web. As tags de abertura e fechamento são assim:
O alinhamento padrão do texto em um parágrafo é no lado esquerdo da página, mas você também pode alinhar seus parágrafos à direita e ao centro.
O uso da 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 menor que o elemento container (pai).
Alinhar o texto dentro dos parágrafos
Indiscutivelmente, o alinhamento mais interessante para o texto do parágrafo é "justificar", que instrui o navegador a exibir o texto alinhado, essencialmente, nos lados direito e esquerdo da janela.
Para justificar o texto em um parágrafo, você usaria a propriedade alinhar texto.
Você também pode alinhar todo o texto dentro de um parágrafo ao lado direito ou à esquerda (o padrão), usando a propriedade alinhar texto.
A propriedade alinhar texto alinhará o texto dentro do elemento. Tecnicamente, não é necessário alinhar imagens contidas no parágrafo ou em outros elementos, mas a maioria dos navegadores trata as imagens como incorporadas a 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 será disposto em volta delas.
Assim como os parágrafos acima, a propriedade float style na tag image posiciona sua imagem na página e informa ao navegador como fluir o texto e outros elementos em torno dessa imagem.
O texto após a tag da imagem acima fluirá ao redor da imagem para a direita, conforme a imagem é exibida à esquerda da tela.
Se quiser que o texto pare de envolver a imagem, use a propriedade clear:
Alinhando mais do que parágrafos
No entanto, e se você quiser alinhar mais do que apenas um parágrafo ou uma imagem? Você pode simplesmente colocar uma propriedade de estilo em todos os parágrafos, mas há uma tag que você pode usar que é mais eficaz:
Basta cercar o texto e as imagens (incluindo as tags HTML) com a tag e a propriedade style (flutuar ou alinhar o texto) e tudo nessa divisão será alinhado como você deseja.
Lembre-se de que os alinhamentos adicionados aos parágrafos ou imagens dentro da divisão serão respeitados, substituindo a tag.
