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 superior o inferior a contenido que 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 esto, 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.

HTML

Vídeo: Texto alrededor de imagenes en HTML5 clase 2

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

Vídeo: Alineación de Texto con HTML y CSS - Muy Básico

Entrar "derecho," "izquierda," "medio," "parte superior" o "fondo" después de la entrada align para especificar donde aparece la imagen en relación con el texto. UN "parte superior" alineación hace que su contenido aparece en el punto más alto de la imagen, la "medio" mueve el texto a la mitad de la foto y la "fondo" dirige el contenido a comenzar en la parte inferior del gráfico. Además, una "derecho" posición, mueve sus datos a la izquierda de la imagen y una "izquierda" alineación coloca contenido a la derecha de la imagen. Escriba su código como sigue:

Guarda el archivo.

CSS

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

Vídeo: Curso Básico de CSS - 8. Texto y Tipografía

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

Guarde el documento.

Vídeo: Como centrar correctamente en HTML y CSS

referencias

W3Schools: HTML atributo de alineación
W3Schools: Propiedad CSS Float
W3Schools: Cómo CSS

Sobre el Autor

Brandy Alexander ha estado escribiendo profesionalmente desde 2001. Es una artista de vidrio con un diseño Web y el fondo de la escritura técnica. Alexander dirige su propio negocio arte-vidrio y ha sido colaborador de "Revista de vidrio Línea" así como diversas publicaciones en línea.