o Tutorial de HTML de Bolso

provavelmente reparou que a maioria dos seus parágrafos de HTML não têm uma indentação inicial. Você pode usar margin ou para empurrar parágrafos para a direita, mas isso afeta todo o parágrafo, não apenas a primeira linha. Além disso, o texto é sempre alinhado à esquerda. Como fazemos o texto centrado, ou o texto alinhado à direita?

Como vimos na seção “Borders”, o modelo de caixa controla a área em torno do texto. Esta secção mostra como mover o texto dentro da própria caixa.,

Indenting Text

To indent text, use the handily-named text-indent property. O seguinte excerto CSS adiciona um travessão 2.0 em a todos os parágrafos:

se indicar um valor negativo para text-indent, a primeira linha do texto irá mudar para a esquerda. Isto é útil para criar “travessões pendurados” para títulos e afins. O único truque é que você deve definir o enchimento de conter bloco em conformidade.

O “recipiente” div tem um revestimento uniforme de 5px por todo o lado, exceto para o revestimento esquerdo, que é 30px., O elemento h2 tem a sua indentação de texto definida como negativa 25px. O resultado é que o h2 turnos 30px para a direita devido ao preenchimento e, em seguida, desloca 25px de volta para a esquerda, devido à negativa text-indent. Todos os outros elementos estão a 30px da borda esquerda. O resultado é um indent pendurar 25px.

alinhamento Horizontal

a text-align propriedade permite alinhar o texto para a direita, esquerda ou centro dentro do bloco que contém., As Quatro opções são:

• left: alinha o texto ao longo do bordo esquerdo da caixa, deixando um bordo à direita. Este é o padrão.

center: centra o texto dentro da caixa.

• right: alinha o texto ao longo do bordo direito da caixa, deixando um bordo irregular para a esquerda.

• justify: alinha o texto ao longo das bordas direita e esquerda da caixa. Isto pode fazer com que o espaçamento de palavras na linha se torne desigual., A opção justify não é tão bem suportada em alguns navegadores mais antigos.

Vamos dar uma olhada em todas as quatro opções:

tenha em mente que text-align alinha o texto e outro conteúdo inline dentro de caixas. Não afecta os próprios bloqueios. Por exemplo, você não pode usar text-align: center para centrar uma caixa menor dentro de uma caixa maior. Este tipo de coisa é parte de um conceito mais avançado chamado posicionamento CSS.