Cómo mover texto alrededor de una imagen con HTML o CSS
Cuando incluye una imagen con el texto en su página web, el estilo predeterminado muestra el gráfico encima o debajo del contenido circundante, dejando un espacio en blanco a la izquierda y derecha de la imagen. Esto desperdicia espacio y hace que la imagen parezca desconectada del texto. Para solucionar esto, tiene la opción de utilizar el lenguaje de marcado de hipertexto (HTML) o las hojas de estilo en cascada (CSS) para especificar la posición de la imagen de modo que el texto se ajuste a los bordes de la imagen. Usa HTML o CSS para mover el texto alrededor de tus imágenes, como prefieras.
HTML
Inicie el archivo de la página en el programa de edición de texto de su computadora y coloque el cursor dentro de la etiqueta "". Escriba "align=" y siga esto con comillas así:
Ingrese "derecha", "izquierda", "centro", "arriba" o "abajo" después de la entrada de alineación para especificar dónde aparece su imagen en relación con su texto. Una alineación "superior" hace que su contenido aparezca en el punto más alto de su imagen, la "central" mueve el texto al centro de la foto y la "inferior" dirige el contenido para que comience en la parte inferior del gráfico. Además, una posición "derecha" mueve sus datos a la izquierda de la imagen y una alineación "izquierda" coloca el contenido a la derecha de la imagen. Escriba su código de la siguiente manera:
Guarda el archivo.
CSS
Coloque el cursor dentro de la etiqueta "" y escriba "style=" con un conjunto de comillas antes del último paréntesis angular. Para ilustrar:
Ingrese "flotante:" entre comillas y escriba el atributo "izquierda" o "derecha" para nombrar la alineación del gráfico. El valor "izquierda" hace que su imagen aparezca a la izquierda y mueve su texto a la derecha, mientras que el atributo "derecha" hace lo contrario. Por ejemplo:
Guarde su documento.
Referencias
Entradas Relacionadas