CSS Alinhamento de Texto
Vamos aprender as seguintes propriedades:
Ø
text-align
Ø
text-align-last
Ø
direction
Ø
unicode-bidi
Ø
vertical-align
A text-align
é
a propriedade para alinhar texto na horizontal.
O texto pode ser alinhado ao centro a esquerda e a direita.
Tem justificado.
Na prática:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
</style>
</head>
<body>
<h1>Título 1 alinhado ao centro. </h1>
<h2>Título 2 alinhado a esquerda. </h2>
<h3>Título 3 alinhado a direita. </h3>
<p>Os três títulos acima estão alinhados ao centro, à
esquerda e à direita. </p>
</body>
</html>
Atenção:
Text-align:justify é
a propriedade justify para alinhar texto proporcional
Na prática:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid
black;
padding: 10px;
width: 200px;
height: 200px;
text-align:
justify;
}
</style>
</head>
<body>
<h1>alinhamento de texto: justificar</h1>
<p>O alinhamento de texto: justificar; value estica
as linhas para que cada linha tenha a mesma largura (como em jornais e revistas)..</p>
<div>
Em meus anos mais jovens e vulneráveis, meu pai me deu
alguns conselhos que venho pensando desde então. 'Sempre que você sentir
vontade de criticar alguém', ele me disse, 'lembre-se de que todas as pessoas
neste mundo não tiveram as vantagens que você teve.'
</div>
</body>
</html>
exto Alinhar Último
A text-align-last
propriedade especifica como alinhar a última linha de um texto.
<!DOCTYPE
html>
<html>
<head>
<style>
p.a
{
text-align-last: right;
}
p.b
{
text-align-last: center;
}
p.c
{
text-align-last: justify;
}
</style>
</head>
<body>
<h1>A
propriedade text-align-last</h1>
<h2>text-align-last:
right:</h2>
<p
class="a">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum
volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
<h2>text-align-last:
center:</h2>
<p
class="b">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum
volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
<h2>text-align-last:
justify:</h2>
<p
class="c">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum
volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
</body>
</html>
Direção do texto
As propriedades Direction
e unicode-bidi
podem ser usadas para alterar a direção do texto
de um elemento:
<!DOCTYPE
html>
<html>
<head>
<style>
p.exem1
{
direction: rtl;
unicode-bidi: bidi-override;
}
</style>
</head>
<body>
<p>Esta
é a direção de texto padrão. </p>
<p
class="exem1">texto para a direita. </p>
</body>
</html>
Alinhamento vertical
A vertical-align propriedade
define o alinhamento vertical de um elemento.
<!DOCTYPE html>
<html>
<head>
<style>
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;
}
</style>
</head>
<body>
<h1>A propriedade de alinhamento
vertical</h1>
<h2>alinhamento vertical: linha de base
(padrão):</h2>
<p>An <img class="a"
src="sqpurple.gif" width="9" height="9"> Uma
imagem com um alinhamento padrão.</p>
<h2>alinhamento vertical: topo do
texto:</h2>
<p>An <img class="b"
src="sqpurple.gif" width="9" height="9"> Uma
imagem com um alinhamento de texto no topo.</p>
<h2>vertical-align:
text-bottom:</h2>
<p>An <img class="c"
src="sqpurple.gif" width="9" height="9">Uma
imagem com um alinhamento de texto inferior.</p>
<h2>alinhamento vertical:
sub:</h2>
<p>An <img class="d"
src="sqpurple.gif" width="9" height="9"> Uma
imagem com um subalinhamento.</p>
<h2>alinhamento vertical:
sup:</h2>
<p>An <img class="e"
src="sqpurple.gif" width="9" height="9"> Uma
imagem com um super alinhamento.</p>
</body>
</html>