Alinhamento de texto CSS
Alinhamento de texto
A text-alignpropriedade é usada para definir o alinhamento horizontal de um texto.
Um texto pode ser alinhado à esquerda ou à direita, centralizado ou justificado.
O exemplo a seguir mostra o texto alinhado ao centro e alinhado à esquerda e à direita (o alinhamento à esquerda é o padrão se a direção do texto for da esquerda para a direita e o alinhamento à direita é o padrão se a direção do texto for da direita para a esquerda):
Exemplo
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
Quando a text-alignpropriedade está configurada para "justificar", cada linha é esticada para que todas as linhas tenham a mesma largura e as margens esquerda e direita sejam retas (como em revistas e jornais):
Exemplo
div {
text-align: justify;
}
Alinhar texto por último
A text-align-lastpropriedade especifica como alinhar a última linha de um texto.
Exemplo
Alinhe a última linha do texto em três elementos <p>:
p.a
{
text-align-last: right;
}
p.b
{
text-align-last: center;
}
p.c
{
text-align-last: justify;
}
Direção do texto
As propriedades directione
unicode-bidipodem ser usadas para alterar a direção do texto de um elemento:
Exemplo
p {
direction: rtl;
unicode-bidi: bidi-override;
}
Alinhamento vertical
A vertical-alignpropriedade define o alinhamento vertical de um elemento.
Exemplo
Defina o alinhamento vertical de uma imagem em um texto:
img.a {
vertical-align: baseline;
}
img.b {
vertical-align: text-top;
}
img.c {
vertical-align:
text-bottom;
}
img.d {
vertical-align: sub;
}
img.e {
vertical-align: super;
}