ubiquitour.com

Cómo mover el texto alrededor de una imagen con HTML o CSS

Cuando se incluye un cuadro con el texto en su página Web, el estilo por defecto muestra el gráfico encima o debajo de contenido circundante, dejando espacios en blanco a la izquierda y derecha de la imagen. Esto desperdicia espacio y hace que la imagen aparezca desarticulada de su texto. Para solucionar esto, tienes la opción de utilizar lenguaje de marcado de hipertexto (HTML) u hojas de estilo en cascada (CSS) para especificar la posición de la imagen para que el texto se ajusta alrededor de las fronteras de la imagen. Utilizar HTML o CSS para mover el texto alrededor de imágenes, como usted prefiera.

Instrucciones

HTML

1 Iniciar el archivo de página en el programa de editor de texto del ordenador y coloque el cursor dentro de la etiqueta "< img >". Tipo "align =" y siga con las comillas así:

< img align = "" / >

2 Entrar en "right", "izquierda", "medio", "superior" o "inferior" después de la entrada de align para especificar dónde aparece la fotografía en relación con el texto. Una alineación de "top" hace que su contenido aparece en el punto más alto de la imagen, el "medio" se mueve el texto a la mitad de la foto y el "fondo" dirige el contenido para empezar en la parte inferior del gráfico. Además, una posición "correcta", se mueve los datos a la izquierda de la imagen y una alineación de "izquierda" coloca contenido a la derecha de la imagen. Escriba el código siguiente:

< img align = "top" / >

3 Guarde el archivo.

CSS

4 Coloque el cursor dentro de la etiqueta "< img >" y tipo "estilo =" con un conjunto de Comillas antes de la última escuadra. Para ilustrar:

< img estilo = "" / >

5 Escriba "flotador:" dentro de la cita marca y tipo de la «izquierda» o atribuir «derecho» para nombrar la alineación de la imagen. El valor de "izquierdo" hace que su imagen aparece en la izquierda y mueve el texto a la derecha, mientras que el atributo "derecho" hace lo contrario. Por ejemplo:

< img estilo = "float: right" / >

6 Guardar el documento.