La propiedad text-align en CSS se usa para especificar la alineación horizontal del texto en un elemento, es decir, se usa para establecer la alineación del contenido horizontalmente, dentro de un elemento de bloque o cuadro de celda de tabla.
Sintaxis:
text-align: left|right|center|justify|initial|inherit;
Valor predeterminado: izquierda si la dirección es ltr y derecha si la dirección es rtl
El valor de la propiedad:
- izquierda: se utiliza para establecer la alineación del texto a la izquierda. Esta es la propiedad predeterminada.
- right: Se utiliza para establecer la alineación del texto a la derecha.
- centro: se utiliza para establecer la alineación del texto en el centro.
- justificar : se utiliza para extender las palabras en la línea completa, es decir, estirando el contenido de un elemento.
- initial : se utiliza para establecer la propiedad CSS de un elemento en su valor predeterminado.
- heredar : se utiliza para heredar una propiedad a un elemento del valor de propiedad de su elemento principal.
Consulte el artículo CSS Align para obtener más detalles.
Ejemplo: Este ejemplo ilustra el uso de la propiedad text-align para alinearla con los valores especificados.
HTML
<!DOCTYPE html>
<html>
<head>
<title>text-align property</title>
<style>
h1 {
color: green;
}
.main {
border: 1px solid black;
}
.gfg1 {
text-align: left;
}
.gfg2 {
text-align: right;
;
}
.gfg3 {
text-align: center;
}
.gfg4 {
text-align: justify;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>text-align property</h2>
<div class="main">
<h3>text-align: left;</h3>
<div class="gfg1">
The course is designed for students
as well as working professionals to
prepare for coding interviews. This
course is going to have coding questions
from school level to the level needed
for product based companies like Amazon,
Microsoft, Adobe, etc.
</div>
</div>
<br>
<div class="main">
<h3 style="text-align: right;">text-align: right;</h3>
<div class="gfg2">
The course is designed for students
as well as working professionals to
prepare for coding interviews. This
course is going to have coding questions
from school level to the level needed
for product based companies like Amazon,
Microsoft, Adobe, etc.
</div>
</div>
<br>
<div class="main">
<h3 style="text-align: center;">text-align: center;</h3>
<div class="gfg3">
The course is designed for students
as well as working professionals to
prepare for coding interviews. This
course is going to have coding questions
from school level to the level needed for
product based companies like Amazon,
Microsoft, Adobe, etc.
</div>
</div>
<br>
<div class="main">
<h3 style="text-align: justify;">text-align: justify;</h3>
<div class="gfg4">
The course is designed for students
as well as working professionals to
prepare for coding interviews. This
course is going to have coding questions
from school level to the level needed
for product based companies like Amazon,
Microsoft, Adobe, etc.
</div>
</div>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con la propiedad text-align se enumeran a continuación:
- Google Chrome 1.0
- Internet Explorer 3.0
- Microsoft Edge 12.0
- Firefox 1.0
- Ópera 3.5
- Safari 1.0