Tecnología

Inicio

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

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 por debajo contexto que la rodea, dejando espacios en blanco a la izquierda y derecha de la imagen. Este espacio de desechos y permite obtener imágenes inconexas de su texto. Para solucionar este problema, usted tiene la opción de utilizar HyperText Markup Language (HTML) o Cascading Style Sheets (CSS) para especificar la posición de la imagen para que el texto se ajusta alrededor de los bordes de la imagen. Usar HTML o CSS para mover el texto alrededor de las imágenes, como usted prefiera.

Instrucciones

HTML

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

<Img align = "" />

2 Enter "derecha", "izquierda", "media", "arriba" o "abajo" después de la entrada align para especificar donde aparece la imagen en relación con el texto. Una alineación "superior" hace que su contenido aparecerá en el punto más alto de la imagen, el "medio" 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", mueve sus datos a la izquierda de la imagen y unos lugares de alineación "izquierda" de contenido a la derecha de la imagen. Escriba el código de la siguiente manera:

<Img align = "top" />

3 Guarda el archivo.

CSS

4 Coloca el cursor dentro de la "<img>" etiqueta y el tipo "style =" con un conjunto de comillas antes del último soporte en ángulo. Para ilustrar:

<Img style = "" />

5 Enter "float:" dentro de las comillas y escriba el atributo o "izquierda" "derecho" a nombre de la alineación de la gráfica. El valor de "izquierda" hace que su imagen aparece a la izquierda y mueve el texto a la derecha, mientras que el atributo "derecho" hace lo contrario. Por ejemplo:

<Img style = "float: right" />

6 Guarde el documento.


Artículos relacionados