Alineación izquierda de CSS. Alineación en HTML. Alineación usando "text-align: center"
HTML existe un parámetro universal y se llama ALIGN. Se puede utilizar con varias etiquetas html:
pag | h1 | div | mesa | cabeza | tcuerpo | pie | tr | th | td
Valores posibles:
Centro- alineación central
Izquierda- alineación izquierda
Bien- A la derecha
Justificar- a lo ancho, a lo largo de los bordes izquierdo y derecho. En este caso, pueden aparecer grandes espacios entre palabras.
El texto está alineado a lo ancho.
Aparición en el navegador:
El título está centrado.
El texto está alineado a lo ancho. El texto está alineado a lo ancho. El texto está alineado a lo ancho. El texto está alineado a lo ancho. El texto está alineado a lo ancho. El texto está alineado a lo ancho. El texto está alineado a lo ancho. El texto está alineado a lo ancho. El texto está alineado a lo ancho. El texto está alineado a lo ancho. El texto está alineado a lo ancho. El texto está alineado a lo ancho.
El contenido de este bloque está alineado al lado derecho.
Tenga en cuenta que la alineación a la izquierda se produce automáticamente. Por lo tanto, no es necesario especificar dicho valor para el parámetro de alineación.
El texto se alinea usando atributo CSS alineación de texto, que puede tomar los siguientes valores:
- centro- en el centro
- justificar- en ancho
- izquierda- en el borde izquierdo
- bien- en el borde derecho
Atributo sangría de texto establece la sangría de la "línea roja", la primera línea de un nuevo párrafo.
Los siguientes atributos también se utilizan para dar formato al texto:
- altura de línea- altura de la línea. Valores posibles:
- norte px,pt,ex,em,en,mm,cm,pc
- norte %
- margen- sangría desde el borde exterior del elemento hasta borde interior elemento padre. Las opciones son posibles (margen superior; margen izquierdo; margen inferior; margen derecho). Valores:
- norte px,pt,ex,em,en,mm,cm,pc
- norte %
- relleno- sangría desde el borde interior del elemento hasta su contenido. Posibles opciones (relleno-arriba; relleno-izquierda; relleno-abajo; relleno-derecha). Valores:
- norte px,pt,ex,em,en,mm,cm,pc
- norte %
- alineación vertical - alineación vertical(relevante para tablas). Valores:
- arriba - alineación superior
- alineación media - media
- abajo - alineación inferior
- text-top: se alinea con el borde superior del texto
- parte inferior del texto - alineación por borde inferior texto
- espacio en blanco- una forma de separar palabras entre sí
- normal
- nowrap (los saltos de línea se ignoran)
A continuación se muestran algunos ejemplos de alineación de texto que no serán demasiado difíciles de entender. Para comprender mejor cómo funcionan los atributos de alineación del texto, intente formatear algunos párrafos usted mismo.
Ejemplo de alineación de texto: Ejemplo #6
Código HTML de la página.:
Intitulado
Anillo de oro de Rusia
“Anillo de Oro de Rusia” (en la antigüedad Zalesye), una ruta turística que incluye una red de antiguas ciudades rusas: Sergiev Posad, Pereslavl-Zalessky, Rostov el Grande, Yaroslavl, Kostroma, Ples, Vladimir, Bogolyubovo, Suzdal, Yuryev-Polskoy , Úglich. El nombre Zalesye es principalmente geográfico; significaba todo lo que estaba "más allá del bosque" en relación con Kievan Rus.
“Anillo de Oro de Rusia” (en la antigüedad Zalesye), una ruta turística que incluye una red de antiguas ciudades rusas: Sergiev Posad, Pereslavl-Zalessky, Rostov el Grande, Yaroslavl, Kostroma, Ples, Vladimir, Bogolyubovo, Suzdal, Yuryev-Polskoy , Úglich. El nombre Zalesye es principalmente geográfico; significaba todo lo que estaba "más allá del bosque" en relación con Kievan Rus.
“Anillo de Oro de Rusia” (en la antigüedad Zalesye), una ruta turística que incluye una red de antiguas ciudades rusas: Sergiev Posad, Pereslavl-Zalessky, Rostov el Grande, Yaroslavl, Kostroma, Ples, Vladimir, Bogolyubovo, Suzdal, Yuryev-Polskoy , Úglich. El nombre Zalesye es principalmente geográfico; significaba todo lo que estaba "más allá del bosque" en relación con Kievan Rus.
“Anillo de Oro de Rusia” (en la antigüedad Zalesye), una ruta turística que incluye una red de antiguas ciudades rusas: Sergiev Posad, Pereslavl-Zalessky, Rostov el Grande, Yaroslavl, Kostroma, Ples, Vladimir, Bogolyubovo, Suzdal, Yuryev-Polskoy , Úglich. El nombre Zalesye es principalmente geográfico; significaba todo lo que estaba "más allá del bosque" en relación con Kievan Rus.
“Anillo de Oro de Rusia” (en la antigüedad Zalesye), una ruta turística que incluye una red de antiguas ciudades rusas: Sergiev Posad, Pereslavl-Zalessky, Rostov el Grande, Yaroslavl, Kostroma, Ples, Vladimir, Bogolyubovo, Suzdal, Yuryev-Polskoy , Úglich. El nombre Zalesye es principalmente geográfico; significaba todo lo que estaba "más allá del bosque" en relación con Kievan Rus.
“Anillo de Oro de Rusia” (en la antigüedad Zalesye), una ruta turística que incluye una red de antiguas ciudades rusas: Sergiev Posad, Pereslavl-Zalessky, Rostov el Grande, Yaroslavl, Kostroma, Ples, Vladimir, Bogolyubovo, Suzdal, Yuryev-Polskoy , Úglich. El nombre Zalesye es principalmente geográfico; significaba todo lo que estaba "más allá del bosque" en relación con Kievan Rus.
“Anillo de Oro de Rusia” (en la antigüedad Zalesye), una ruta turística que incluye una red de antiguas ciudades rusas: Sergiev Posad, Pereslavl-Zalessky, Rostov el Grande, Yaroslavl, Kostroma, Ples, Vladimir, Bogolyubovo, Suzdal, Yuryev-Polskoy , Úglich. El nombre Zalesye es principalmente geográfico; significaba todo lo que estaba "más allá del bosque" en relación con Kievan Rus.
Tres atributos más potentes para dar formato al texto:
- altura de línea- define interlineado. El valor debe ser mayor que la altura de la fuente; de lo contrario, el valor se ajusta automáticamente a la altura del texto. Valores:
- norte px,pt,ex,em,en,mm,cm,pc
- norte %
- espaciado de palabras- espaciado entre palabras. Valores:
- norte px,pt,ex,em,en,mm,cm,pc
- espaciado entre letras- espaciado entre letras. Valores:
- norte px,pt,ex,em,en,mm,cm,pc
Ejemplo de formato de texto: Ejemplo No. 7
Código HTML de la página.:
Intitulado
Anillo de oro de Rusia
“Anillo de Oro de Rusia” (en la antigüedad Zalesye), una ruta turística que incluye una red de antiguas ciudades rusas: Sergiev Posad, Pereslavl-Zalessky, Rostov el Grande, Yaroslavl, Kostroma, Ples, Vladimir, Bogolyubovo, Suzdal, Yuryev-Polskoy , Úglich. El nombre Zalesye es principalmente geográfico; significaba todo lo que estaba "más allá del bosque" en relación con Kievan Rus.
“Anillo de Oro de Rusia” (en la antigüedad Zalesye), una ruta turística que incluye una red de antiguas ciudades rusas: Sergiev Posad, Pereslavl-Zalessky, Rostov el Grande, Yaroslavl, Kostroma, Ples, Vladimir, Bogolyubovo, Suzdal, Yuryev-Polskoy , Úglich. El nombre Zalesye es principalmente geográfico; significaba todo lo que estaba "más allá del bosque" en relación con Kievan Rus.
“Anillo de Oro de Rusia” (en la antigüedad Zalesye), una ruta turística que incluye una red de antiguas ciudades rusas: Sergiev Posad, Pereslavl-Zalessky, Rostov el Grande, Yaroslavl, Kostroma, Ples, Vladimir, Bogolyubovo, Suzdal, Yuryev-Polskoy , Úglich. El nombre Zalesye es principalmente geográfico; significaba todo lo que estaba "más allá del bosque" en relación con Kievan Rus.
Ahora podemos aplicar este conocimiento a la hoja de estilo externa formateando la etiqueta de párrafo:
Un ejemplo de formato de texto usando una hoja de estilo externa: Ejemplo No. 8
Código HTML de la página.:
Intitulado
Anillo de oro de Rusia
“Anillo de Oro de Rusia” (en la antigüedad Zalesye), una ruta turística que incluye una red de antiguas ciudades rusas: Sergiev Posad, Pereslavl-Zalessky, Rostov el Grande, Yaroslavl, Kostroma, Ples, Vladimir, Bogolyubovo, Suzdal, Yuryev-Polskoy , Úglich. El nombre Zalesye es principalmente geográfico; significaba todo lo que estaba "más allá del bosque" en relación con Kievan Rus.
archivo css:
cuerpo (familia de fuentes: Verdana,Tahoma,Arial,Helvetica,sans-serif; color: gris; tamaño de fuente: 8pt;) H1 (color: verde; tamaño de fuente: 130%;) p (sangría de texto: 15px ; tamaño de fuente: 10 puntos; altura de línea: 150%; alineación de texto: espacio entre letras: 7px;)
La mayoría de nosotros hemos tenido una idea clara de una página perfectamente diseñada desde la escuela. Una dispersión uniforme de letras, líneas delgadas de palabras, un estricto rectángulo de texto enmarcado por márgenes uniformes: esta es exactamente la imagen que vemos al hojear cualquier edición impresa. Existe una gran tentación de representar algo similar en una página web, especialmente porque para esto se propone un medio bien conocido: la alineación del texto en ancho. Sin embargo, lo que es bueno para un tipógrafo es pecado mortal para un diseñador web. Y todo porque, cuando se aplica al marcado del sitio, esta función está llena de tantas deficiencias que su única ventaja en forma de un borde derecho suave simplemente se desvanece ante nuestros ojos. Estas son solo algunas de las razones por las que debería deshacerse de la justificación en favor de la alineación hacia la izquierda.
Desorden visible dentro de un bloque de texto
Si, si, que más suave que el borde bloque de texto, más obvio es el desorden en su interior. En tipografía, todo un arsenal de herramientas permite lograr coherencia en el texto: separación de palabras, ajuste del espaciado entre palabras y las distancias entre letras, e incluso opciones de fuente ligeramente más anchas o ligeramente más estrechas. Pero el diseño de una página de Internet sugiere, por regla general, sólo una forma de "estirar" una línea de borde a borde: un aumento incontrolado en el ancho de los espacios. Esto no sólo conduce a la aparición de espacios desagradables entre las palabras, sino que estos espacios, como por ley de la mezquindad, a menudo caen aproximadamente en el mismo lugar en cada línea, formando los llamados "ríos" verticales. Todo esto le da al texto un aspecto muy desordenado.
Ilegibilidad
Pero si todavía se puede sacrificar la estética en aras de unos bordes limpios, entonces aquí problemas obvios con la percepción visual del texto: el precio por ellos sigue siendo demasiado alto. Y el texto justificado es objetivamente mucho menos legible que el texto alineado a la izquierda. Razón principal todo radica en los mismos intervalos aumentados entre palabras: el ojo se ve constantemente obligado a buscar el comienzo de la siguiente palabra y, debido a la diferencia de espacios de una línea a otra, también se ve obligado a ajustarse de una distancia a otra.
La necesidad de trabajar en la longitud de la línea, a menudo sin éxito
Para ser justos, vale la pena señalar que las desventajas identificadas del texto justificado se pueden reducir aumentando la longitud de la línea. Sin embargo, este método no siempre será eficaz. Pero esto puede reducir la legibilidad con un grado de probabilidad muy alto: es difícil para los ojos, después de haber escaneado una línea larga hasta el final, saltar con precisión y rapidez al comienzo de la siguiente.
No apto para dispositivos móviles
Cuanto más estrecha sea la columna con texto, menos sujeta a alineación. Y aquí este formato entra en conflicto directo con los requisitos. dispositivos móviles, para lo cual, por el contrario, cuanto más corta sea la línea, mejor. De acuerdo, una cosa es seguir con los ojos una línea larga en un monitor de pantalla completa y otra muy distinta desplazar cada línea hacia adelante y hacia atrás una y otra vez. Un placer dudoso, pero la manera correcta¡Pierde tu audiencia móvil!
Parecería que si pudiéramos agregar una función de ajuste de texto a la página, todos estos problemas que surgen al alinear el texto al ancho de la página se solucionarían. Pero el problema es que el marcado HTML no proporciona dicha función. Entonces resulta que hoy en día no hay otra forma de mantener un espacio aceptable entre palabras en una página web que no sea alinear el texto con el borde.
Por lo tanto, al crear una página de Internet, es importante recordar lo principal: un sitio web no es un libro y es necesario abordar su diseño desde posiciones dictadas por la tecnología y la psicología de la percepción, y no por las opiniones estéticas de alguien. sin embargo, muy, muy condicional. Créame, si su texto está bien colocado y, sobre todo, es legible con facilidad y placer, ¡nadie prestará atención a una nimiedad como los márgenes desiguales!
Por cierto, cuando leíste este artículo, ¿notaste que el texto no está justificado?
En el caso de los documentos HTML, las etiquetas funcionan más para marcar el contenido que para indicar cómo debe presentarse. Se consigue un mayor control sobre la presentación con los estilos. En este artículo analizaré los estilos asociados con el formato de párrafo en HTML.
Etiqueta
En HTML, puede especificar párrafos y alinear atributo los alinea a la izquierda, a la derecha, al centro o justificados. Además de ellos, utilizaremos el atributo de estilo global.
Alineación de párrafos
Puede alinear un párrafo utilizando el atributo de alineación con los siguientes valores:
alineación de texto: izquierda|derecha|centro|justificar|inicial|heredar;
Copie el siguiente código en su archivo .html.
Este párrafo está alineado al centro.
Este párrafo está alineado a la derecha.
Este párrafo aparece justificado en la ventana del navegador. Un párrafo justificado se alinea a derecha e izquierda agregando espacios adicionales. Puede ver que los bordes del párrafo justificado coinciden con los bordes de los párrafos alineados a la izquierda y a la derecha. En un párrafo alineado a la izquierda, el borde izquierdo es recto, mientras que en un párrafo alineado a la derecha, el borde izquierdo es recto. ¿Ves cómo ambos bordes de este párrafo son rectos? Esto se logra mediante el estilo text-align:justify.
en la ventana Navegador HTML El código del párrafo se ve así.
Interlineado
Puede controlar el interlineado del párrafo usando style=line-height. Utilice el atributo de estilo con los siguientes valores:
altura de línea: normal|número|longitud|inicial|heredar;
A continuación se muestra un ejemplo de código HTML que muestra párrafos con diferente interlineado:
Este párrafo utiliza dos significados para atributo de estilo. La primera altura de línea: 1.5 especifica un interlineado y medio para el párrafo, y el segundo valor text-align:justify especifica que el texto del párrafo debe distribuirse a lo ancho.
Este párrafo está a doble espacio y justificado. altura de línea: 2 especifica doble espacio. El atributo de estilo no tiene por qué tener dos valores. Pero si necesita especificar dos valores, puede hacerlo separándolos con un punto y coma.
A continuación se muestran algunas formas diferentes de utilizar el valor de altura de línea para el atributo de estilo:
: establece el interlineado en 13 píxeles;
: Se establece en distancia HTML entre párrafos al 200% en relación con el tamaño de fuente actual;
: establece la altura de la línea en 14 píxeles.
Sangrías
Utilicé el término "sangrías" para que sea más fácil de entender. Pero en HTML usamos espacios para crear un espacio vacío alrededor de un objeto. Puede utilizar el atributo de estilo con un valor de relleno para sangrar un párrafo hacia la izquierda o hacia la derecha.
A continuación se muestra un ejemplo de párrafos con sangría izquierda y derecha:
Este párrafo no tiene sangría, simplemente está justificado. Mira el atributo estilo de elemento P es para este párrafo.
Para este párrafo, configuré el relleno izquierdo en 30px usando el estilo padding-left:30px. Este párrafo también se justifica utilizando el estilo text-align:justify. Como ya sabes, podemos utilizar múltiples valores para el atributo Estilo separándolos con punto y coma.
Y este párrafo tiene una sangría derecha de 30 píxeles, pero no una sangría izquierda. También está alineado al ancho. El valor 'padding-right' del atributo de estilo especifica el relleno derecho. Si no ve el efecto, reduzca el ancho de la ventana de su navegador para que el párrafo HTML justificado se muestre correctamente.
Sangría entre párrafos (sangría antes y sangría después del párrafo)
En HTML o CSS no necesitamos esto. Simplemente podemos especificar el estilo de relleno para el elemento.
Padding-top y padding-bottom especifican espacios en blanco antes y después de un párrafo, que actúa como relleno en la parte superior o inferior. Mire el ejemplo de etiqueta a continuación
Lo instalé por primera vez párrafo HTML sangría de 10 píxeles antes del segundo párrafo y 50 píxeles después del segundo párrafo:
Este párrafo no tiene ninguna sangría antes o después especificada. Este es un párrafo normal, justificado. Como ya sabes, podemos justificar un párrafo usando el código style=”text-align:justify” dentro de la etiqueta.
Este párrafo es enorme. También tiene 10 píxeles de relleno antes del párrafo y 50 píxeles después. Dentro de la etiqueta he configurado 3 estilos.
Este es un párrafo normal sin sangrías y con alineación predeterminada.
Cosas para recordar
- Un párrafo HTML se puede alinear usando el atributo align o el estilo de alineación de texto;
- HTML se representará de manera diferente según el tamaño de la pantalla y el tamaño de la ventana del navegador;
- Agregar espacios adicionales o lineas vacias El código HTML no afecta la salida. El navegador elimina todos los espacios adicionales;
- Las etiquetas definen lo que se debe mostrar y los estilos definen cómo se debe mostrar;
- Los estilos se pueden especificar en tres de varias maneras— integrado (dentro de etiquetas), interno ( dentro del mismo archivo HTML usando el elemento
Alinear texto a la izquierda
Alinear texto a la izquierda
Ejemplo No. 2. Alinear texto e imágenes al centro.
Alinear el texto al centro. A menudo se utiliza para encabezar artículos o para mostrar imágenes en el centro.
Alineación central del textoLa página se convierte a la siguiente
Alinear texto a la izquierda
Ejemplo No. 3. Alinear el texto a la derecha
Alinear el texto a la derecha.
Alinear el texto a la derechaLa página se convierte a la siguiente
Alinear el texto a la derecha
Ejemplo No. 4. Alinear el texto a todo el ancho de un área
Alinear el texto a todo el ancho. Resulta que la alineación se produce tanto en el campo como en el borde derecho. El navegador agrega espacios automáticamente.
La página se convierte a la siguiente
Alinear el texto a todo el ancho de un área
A veces alinear texto: justificar;
Puede que no funcione. Esto tiene que ver con la herencia e incluso con el funcionamiento del navegador. En general, no se recomienda utilizar esta opción.Nota En lugar de propiedades de alineación de texto
También puedes usar el atributo align, que está escrito junto con la etiqueta. Se puede utilizar con varias etiquetas. Por ejemplo:Alineación central
... ...Alinear el texto a todo el ancho de un área
diferencia de etiquetaY El caso es que este último hace la transición a (nueva linea espacio vertical
