En este capítulo aprenderá sobre las siguientes propiedades:
text-aligntext-align-lastdirectionunicode-bidivertical-alignLa propiedad text-align se utiliza para establecer la alineación horizontal de un texto.
Un texto puede estar alineado, centrado o justificado hacia la izquierda o hacia la derecha.
El siguiente ejemplo muestra texto alineado al centro y alineado a la izquierda y a la derecha. (La alineación a la izquierda es la predeterminada si la dirección del texto es de izquierda a derecha y hacia la derecha la alineación es predeterminada si la dirección del texto es de derecha a izquierda):
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
</style>
</head>
<body>
<h1>Heading 1 (center)</h1>
<h2>Heading 2 (left)</h2>
<h3>Heading 3 (right)</h3>
<p>The three headings above are aligned center, left and right.</p>
</body>
</html>
Cuando la propiedad text-align se establece en "justificar", cada línea se estirado para que cada línea tenga el mismo ancho, y los márgenes izquierdo y derecho sean directo (como en revistas y periódicos):
div {
text-align: justify;
}Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
padding: 10px;
width: 200px;
height: 200px;
text-align: justify;
}
</style>
</head>
<body>
<h1>Example text-align: justify</h1>
<p>The text-align: justify; value stretches the lines so that each line has equal width (like in newspapers and magazines).</p>
<div>
In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'
</div>
</body>
</html>
La propiedad text-align-last especifica cómo alinear la última línea de un texto.
Alinee la última línea de texto en tres elementos <p>:
p.a
{
text-align-last: right;
}
p.b
{
text-align-last: center;
}
p.c
{
text-align-last: justify;
}Pruébelo usted mismo →
<!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>The text-align-last Property</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>
La dirección y Las propiedades unicode-bidi se pueden utilizar para cambiar la dirección del texto de un elemento:
p {
direction: rtl;
unicode-bidi: bidi-override;
}Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
direction: rtl;
unicode-bidi: bidi-override;
}
</style>
</head>
<body>
<p>This is the default text direction.</p>
<p class="ex1">This is right-to-left text direction.</p>
</body>
</html>
La propiedad vertical-align establece la alineación vertical de un elemento.
Establecer la alineación vertical de una imagen en un 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;
}Pruébelo usted mismo →
<!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>The vertical-align Property</h1>
<h2>vertical-align: baseline (default):</h2>
<p>An <img class="a" src="sqpurple.gif" width="9" height="9"> image with a default alignment.</p>
<h2>vertical-align: text-top:</h2>
<p>An <img class="b" src="sqpurple.gif" width="9" height="9"> image with a text-top alignment.</p>
<h2>vertical-align: text-bottom:</h2>
<p>An <img class="c" src="sqpurple.gif" width="9" height="9"> image with a text-bottom alignment.</p>
<h2>vertical-align: sub:</h2>
<p>An <img class="d" src="sqpurple.gif" width="9" height="9"> image with a sub alignment.</p>
<h2>vertical-align: sup:</h2>
<p>An <img class="e" src="sqpurple.gif" width="9" height="9"> image with a super alignment.</p>
</body>
</html>
Especifica la dirección del texto/dirección de escritura.
Especifica la alineación horizontal del texto.
Especifica cómo alinear la última línea de un texto.
Se utiliza junto con la propiedad de dirección para establecer o devolver si el texto debe anularse para admitir varios idiomas en el mismo documento.
Establece la alineación vertical de un elemento.