Cómo alinear texto en HTML con el centro, el ancho y los bordes de la página
Parecería que no hay nada complicado en instalar una imagen o un texto en el centro de la ventana del navegador. Usamos la etiqueta CENTRO y todo va al lugar que pretendíamos. Sin embargo, no todo es tan sencillo. Hay tres formas de alinear al centro, cada una de ellas tiene sus propias características y diferencias en diferentes navegadores.
Una de las etiquetas más simples y convenientes, CENTRO, está diseñada para alinear un bloque de texto. Esta etiqueta también se puede utilizar para centrar figuras y tablas. La excepción son los elementos.
o
para el cual la alineación se especifica mediante propiedades etiqueta IMG. Entonces, si colocas un elemento
dentro de la etiqueta CENTRO, la imagen estará alineada a la derecha.
Ejemplo 4.1. Centrar con la etiqueta CENTER
Este texto se alineará con el centro de la ventana del navegador y el texto subyacente
dibujando en el borde derecho.
Formalmente, CENTER solo debe usarse como parámetro para otros bloquear etiquetas(P, PRE y otros). Sin embargo, en el navegador Netscape Navigator 2.0, CENTER se introdujo como una etiqueta independiente. Esta adición tenía como objetivo eliminar innecesarios espacio vertical, que aparece cuando se utilizan etiquetas de bloque. Si en lugar de la etiqueta CENTRO el texto se coloca dentro de un párrafo (
) , aparece un espacio vertical adicional entre linea horizontal y este texto.
CENTER no forma parte de la especificación HTML. En "oficial" formato HTML, como la alineación del texto, debe realizarse mediante atributos de etiqueta (por ejemplo,
) o usando estilos. Sin embargo, esta etiqueta se ha ganado el derecho a existir. Sin embargo, tras la publicación de la especificación HTML 4 W3, el Consorcio recomendó no utilizar la etiqueta CENTER y en su lugar utilizar el elemento
Ejemplo 4.2. Centrado con una etiqueta DIV
Centrar texto usando una etiqueta DIV
Otra forma de centrar es utilizar estilos. Los estilos son instrucciones que le permiten controlar atributos de formato como fuente, color, alineación, etc. Un ejemplo de cómo anular la etiqueta P para centrar el texto.
Ejemplo 4.3. Centrar con estilos
Ahora, cuando usarás la etiqueta P con lo anterior
estilo, el texto del párrafo se alineará con el centro de la ventana del navegador
Buen día suscriptores y lectores de esta publicación. Hoy quiero entrar en detalle y contaros cómo centrar texto en CSS. En algunos artículos anteriores mencioné indirectamente este tema, entonces tienes algunos conocimientos en esta área.
Sin embargo, en esta publicación te hablaré de de todas las maneras posibles alineación de objetos, y también explicar cómo sangrar y líneas rojas en párrafos. ¡Así que comencemos a aprender el material!
HTML y su descendencia y alinear
Este método casi nunca se utiliza, ya que ha sido reemplazado por herramientas de hojas de estilos en cascada. Sin embargo, saber que existe dicha etiqueta no le hará ningún daño.
En cuanto a la validación ( este término se describe en detalle en el artículo ""), entonces la propia especificación html condena el uso < centro>, ya que para su validez es necesario utilizar una transición TIPO DE DOCUMENTO>.
este tipopermite el paso de elementos prohibidos.
Ahora pasemos al atributo. alinear. Establece la alineación horizontal de los objetos y se ajusta después de la declaración de etiqueta. Normalmente, se puede utilizar para alinear el contenido a la izquierda ( izquierda), a lo largo del borde derecho ( bien), centrado ( centro) y por el ancho del texto ( justificar).
A continuación daré un ejemplo en el que colocaré la imagen y el párrafo en el centro.
Este contenido estará centrado.
Tenga en cuenta que para la imagen el atributo que estamos analizando tiene significados ligeramente diferentes.
En el ejemplo que usé alinear="medio". Gracias a esto, la imagen quedó alineada de manera que la frase quedó ubicada claramente en el centro de la imagen.
Herramientas de centrado en css
Las propiedades CSS diseñadas para alinear bloques, texto y contenido gráfico se utilizan con mucha más frecuencia. Esto se debe principalmente a la conveniencia y flexibilidad de implementar estilos.
Entonces, comencemos con la primera propiedad del centrado de texto: esta es texto-alinear.
Funciona de la misma manera que alinear en . Entre las palabras clave puedes elegir una de lista general o heredar las características de un antepasado ( heredar).
Me gustaría señalar que en css3 puedes configurar 2 parámetros más: comenzar– dependiendo de las reglas de escritura del texto (de derecha a izquierda o viceversa), establece la alineación hacia la izquierda o hacia la derecha (similar al trabajo hacia la izquierda o hacia la derecha) y fin– lo contrario de inicio (al escribir texto de izquierda a derecha actúa como derecho, al escribir de derecha a izquierda – izquierda).
frase de la derecha
Oración usando fin
Te cuento un pequeño truco. Al seleccionar un valor justificar la última línea puede colgar de manera poco atractiva desde abajo. Para, por ejemplo, posicionarlo en el centro, puede utilizar la propiedad alineación-texto-último.
Para alinear verticalmente el contenido del sitio o las celdas de la tabla, use la propiedad alineación vertical. A continuación he descrito los principales palabras clave elemento.
| Palabra clave | Objetivo |
| base | Especifica la alineación con una línea ancestral, denominada línea base. Si el objeto ancestro no tiene dicha línea, entonces la alineación se produce a lo largo del borde inferior. |
| medio | La mitad del objeto mutado está alineada con la línea base, a la que se agrega la altura mínima del elemento principal. |
| abajo | La parte inferior del contenido seleccionado se ajusta a la parte inferior del objeto debajo de él. |
| arriba | Similar al fondo, solo que con parte superior objeto. |
| súper | Hace que el carácter sea superíndice. |
| sub | Hace que el elemento sea subíndice. |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
do EN mi tACERCA DEA
|
Sangrías
Y finalmente llegamos a las sangrías de párrafo. EN lenguaje css utiliza una propiedad especial llamada sangría de texto.
Con su ayuda puedes hacer tanto una línea roja como una protuberancia (debes especificar un valor negativo).
Para crear una línea roja solo necesitas conocer un parámetro.
Esta es la propiedad de sangría de texto simple.
Alabo a quienes probaron cada ejemplo en la práctica. Envía enlaces a mi blog a tus amigos y no olvides suscribirte. ¡Buena suerte! ¡Adiós!
Saludos cordiales, Roman Chueshov
Leer: 675 veces
ventanas : Explorador de Internet 3.0+, Firefox 1.0+, Google Chrome, Opera 3.51 - 6.xx y 9.0+, Safari 3.1+, SeaMonkey 1.0+ [1].
linux: Firefox 1.0+, Chromium, Opera 5.0 - 6.xx y 9.0+, SeaMonkey 1.0+ [2].
Alinear el contenido de la página centrado en área visible ventana del navegador con usando HTML- sin CSS. El contenedor en el que se ubicará el contenido de la página web está alineado en el centro - en ancho y alto: [Abrir página de ejemplo].
Y también en Netscape 2.02 - 4.80 y Offbyone. En Netscape 2.02 - 4.80, hay cierto desplazamiento del contenido de la página a la esquina superior izquierda del área visible de la ventana del navegador debido a la forma en que estos programas reservan espacio para las barras de desplazamiento.
Y también en Netscape 2.02 - 4.80. En Netscape 2.02 - 4.80, hay cierto desplazamiento del contenido de la página a la esquina superior izquierda del área visible de la ventana del navegador debido a la forma en que estos programas reservan espacio para las barras de desplazamiento.
Aliosque subditos y tema
CSS solo para el navegador Opera: en Opera este texto es HTML/XHTML rojo. Código:
En Opera este texto es rojo.
CSS. Código: donotexist:-o-prefocus, p (color: #f00;) La pseudoclase -o-prefocus le permite aplicar estilos a elementos para que aparezcan solo en navegador ópera. El código se coloca en archivo compartido CSS, y no en uno separado como es el caso de comentarios condicionales Internet Explorer"a. Fuente: http://www.opera.com/docs/specs/presto2.12/css/o-vendor/ [ 1 ] Opera 3.5 - 5.0 ignora "doesnotexist:-o-prefocus" y acepta CSS código como p (color: #f00;). Opera 6.0 - 9.4 ignora todo el código que comienza con "doesnotexist" [2] Internet Explorer 5.5+, Firefox 1.0+, Google Chrome, Safari 3.1+, SeaMonkey 1.0+, Netscape 7.2+. , Mozilla 1.5+ ignora todo el código que comienza con "doesnotexist". Los navegadores más antiguos como Internet Explorer anteriores a 5.5 o Netscape anteriores a 7.2 o Mozilla anteriores a 1.5 parecen ignorar los estilos inusuales de Opera 9.5 y CSS más nuevos sólo en lo que perciben. en este caso etiqueta p; haciendo que el texto en él sea rojo. [ 3 ] El texto se vuelve rojo también en Dillo 3.0.1.Alinea el contenido de la página con el centro en el área visible de la ventana del navegador con usando CSS. Se alinea centrado - en ancho y alto - el contenedor en el que se ubicará todo el contenido de la página web - [Abrir página de ejemplo]. HTML/XHTML. Código:
CSS. Código: html (alto: 100%; margen: 0px;) alto del cuerpo: 100%; margen: 0px;) .spacer (posición: relativa; arriba: 0px; izquierda: 0px; altura: 50%; ancho: 100px; flotante: izquierda; margen: 0px 0px -250px 0px; fondo: #999;).wrapper ( posición: superior relativa: 0px; ancho: 100%; fondo: #a3ddc4;) .pagecontent (posición: relativa; superior: 0px; izquierda: 0px; alto: 500px; ancho: 800px; margen: 0 automático; fondo: #ff6f6f ;) Container.pagecontent: para todo el contenido de la página web. Este contenedor debe ser explícitamente dimensiones dadas en px, em, etc. - no como porcentaje. La altura y el ancho pueden ser mayores que el área visible de la ventana del navegador, pero en este caso estamos hablando de un caso más práctico: cuando la altura y el ancho del contenedor.pagecontent son menores que las dimensiones del área visible. de la ventana del navegador. El bloque.pagecontent está centrado/justificado en el área visible de la ventana del navegador usando "margen: 0 auto". .Wrapper crea un espacio donde .pagecontent está centrado/justificado. Ancho.wrapper es igual a 100%, de modo que la alineación centro/ancho ocurre cuando diferentes tamañosárea visible de la ventana del navegador. La altura del.wrapper debe ser igual a la altura del contenedor.pagecontent. .Spacer alinea .wrapper con .pagecontent dentro centrado/alto en el área visible de la ventana del navegador. El width.spacer puede ser cualquiera. La altura es del 50%, esto coloca el borde superior de .pagecontent verticalmente centrado en el área visible de la ventana del navegador. El margen inferior del block.spacer igual a la mitad de la altura.pagecontent alinea el contenedor.pagecontent centrado/altura en cualquier altura actual del área visible de la ventana del navegador. Este método es adecuado para todos los principales navegadores modernos. También funciona en navegadores más antiguos como Internet Explorer 6 o primeras versiones Maxtón. Pero la altura del contenedor en el que se encuentra el contenido de la página debe tener dimensiones especificadas explícitamente y, si cambian, el valor del margen inferior del bloque.spacer también debe cambiarse en consecuencia. Hay otra forma de hacerlo horizontalmente y alineación vertical centrado en CSS, con código CSS que es más fácil de mantener. Aunque este método no funciona en navegadores web más antiguos: alineación central de CSS: ancho y alto - 1. [ 1 ] Y también en Netscape 7.2+, Mozilla 1.5+. [ 2 ] Y también en Netscape 7.2+, Mozilla 1.5+.
¡Hola! Sigamos dominando los conceptos básicos. lenguaje HTML. Veamos qué necesitas escribir para alinear el texto al centro, al ancho o a los bordes.
Poniendonos manos a la obra, veamos cómo centrar el texto en tres de diferentes maneras. Los dos últimos están vinculados directamente a la hoja de estilo. Puede ser un archivo CSS que se conecta a las páginas del sitio y define su apariencia.
Método 1: trabajo directo con HTML
En realidad es bastante simple. Vea el ejemplo a continuación.
Alinea el párrafo al centro.
Si necesita mover fragmentos de texto de otra manera, en lugar del parámetro "centro", ingrese los siguientes valores:
- justificar: alinear el texto al ancho de la página;
- derecha – en el borde derecho;
- izquierda - a la izquierda.
Por analogía, puedes mover el contenido que está en los encabezados (h1, h2) y el contenedor (div).
Método 2 y 3: usar estilos
El diseño presentado arriba se puede transformar ligeramente. El efecto será el mismo. Para hacer esto, debe escribir el código a continuación.
Bloque de texto.
De esta forma, el código se escribe directamente en HTML para centrar el contenido del texto.
hay mas opción alternativa lograr resultados. Deberá seguir un par de pasos.
Paso 1. En el código principal escribe
Paso 2. En el complemento archivo css ingresa el siguiente código:
Rovno (alineación de texto:centro;)
Observo que la palabra "rovno" es solo el nombre de una clase que se puede llamar de otra manera. Esto queda a criterio del programador.
Por analogía, en HTML puedes centrar, justificar y alinear fácilmente el texto con el borde derecho o izquierdo de la página. Como puedes ver, hay mucho más de una opción para lograr tu objetivo.
Sólo unas cuantas preguntas:
- ¿Estás realizando un proyecto de información sin fines de lucro?
- ¿Quieres que tu sitio web funcione bien? motores de búsqueda?
- ¿Quieres obtener ingresos en línea?
Si todas las respuestas son positivas, entonces basta con mirar o enfoque integrado al desarrollo del sitio. La información será especialmente útil si se ejecuta en el CMS de WordPress.
Me gustaría señalar que sus propios sitios web son sólo una de las muchas opciones para generar ingresos pasivos o activos en Internet. Mi blog está dedicado a capacidades financieras en línea.
¿Ha trabajado alguna vez en el campo del arbitraje de tráfico, redacción publicitaria y otras áreas de actividad que reúnen la principal o ingresos adicionales durante la colaboración remota? Puedes aprender sobre esto y mucho más ahora mismo en las páginas de mi blog.
Publicaré bastantes más en el futuro. información útil. Manténgase conectado. Si lo deseas, puedes suscribirte a las actualizaciones de Workip por correo electrónico. El formulario de suscripción se encuentra a continuación.
