¿Necesita el código para ajustar el texto alrededor de una imagen? Normalmente, cuando crea una página HTML , todo fluye linealmente, es decir, un bloque directamente tras otro. Todas mis publicaciones anteriores son un ejemplo de esto, es decir, texto, luego imagen, luego texto, etc.

A veces, es posible que desee incluir texto junto a una imagen en lugar de debajo de ella. Esto se llama envolver texto alrededor de la imagen. En realidad, es bastante fácil ajustar el texto usando HTML . Tenga en cuenta que no tiene que usar CSS para ajustar el texto.

Sin embargo, en estos días el W3C recomienda usar CSS en lugar de HTML para este tipo de tareas. Mencionaré ambos métodos a continuación, pero si puede, es mejor usar CSS ya que es más adaptable a los diseños de sitios web receptivos.

Ajustar texto alrededor de la imagen usando HTML

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque nunc in lorem egestas non imperdiet enim congue.

Para que el texto se ajuste al lado derecho de la imagen, debe alinear la imagen a la izquierda:

<img src="IMAGE URL" align="left" /><p>Your text goes here.</p>

Si desea que el texto aparezca a la izquierda y la imagen en el extremo derecho, simplemente cambie el parámetro de alineación a "derecha".

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque nunc in lorem egestas non imperdiet enim congue.

<img src="IMAGE URL" align="right" /><p>Your text goes here.</p>

¡Eso es todo! Bastante^(Pretty) fácil, ¿verdad? La única vez que querría usar CSS es si desea agregar márgenes a las imágenes, de modo que haya algo de espacio entre el texto y la imagen.

Puede agregar márgenes a una imagen utilizando el siguiente código de estilo CSS :

<img src=”IMAGE URL” align=”left” style=”margin: 0px 10px 0px 0px;” /><p>Your text goes here.</p>

El código anterior usa el elemento MARGIN CSS para agregar 10 píxeles de espacio en blanco en el lado derecho de la imagen. Como hemos alineado la imagen a la izquierda, queremos agregar el espacio en blanco a la derecha.

Básicamente, los cuatro números representan SUPERIOR DERECHA INFERIOR IZQUIERDA^{(TOP RIGHT BOTTOM LEFT)} . Entonces, si desea agregar el espacio en blanco a una imagen alineada a la derecha, debe hacer esto:

<img src=”IMAGE URL” align=”right” style=”margin: 0px 0px 0px 10px;” /><p>Your text goes here.</p>

Por lo tanto, es bastante simple usar HTML para realizar esta tarea, pero una vez más, es posible que no funcione bien para sitios receptivos.

Ajustar texto alrededor de la imagen usando CSS

La mejor manera de envolver texto alrededor de una imagen es usar CSS . Le brinda un control más detallado sobre el posicionamiento de los elementos y funciona mejor con los estándares de codificación modernos.

<img src="IMAGE URL" alt="A photo" class="left" />

Aunque incluí CSS directamente en la etiqueta de la imagen en el ejemplo de HTML , tampoco deberías volver a hacerlo nunca más. En su lugar, debe tener un archivo separado llamado hoja de estilo que contenga todo su código CSS .

En la etiqueta IMG , simplemente asigna una clase a la etiqueta y le asigna un nombre. En mi ejemplo, nombré la clase left . En mi hoja de estilo, todo lo que tengo que hacer es agregar el siguiente código:

.left {
 float: left;
 padding: 0 10px 0 0;}

Como puede ver, agregué 10 px de relleno al lado derecho de la imagen alineada a la izquierda. También usé la propiedad flotante para sacar la imagen del flujo normal del documento y colocarla en el lado izquierdo del contenedor principal.

Como puede ver, es mucho más limpio que agregar todo ese código a la etiqueta IMG . También es más fácil de administrar y puede usar muchas más propiedades CSS para personalizar el aspecto de su página web. Si tiene alguna pregunta, no dude en comentar. ¡Disfrutar!

HTML Code to Wrap Text Around Image

Need the code to wrap text around an image? Normally when you сreatе an HTML page, everything flows linearly, meaning оne block directly after another. All of my previous posts are an example of this, i.e. text, then picture, then text, etc.

Sometimes you may want to include text next to an image instead of below it. This is called wrapping text around the image. It’s actually fairly easy to wrap text using HTML. Note that you don’t have to use CSS in order to wrap text.

However, these days the W3C recommends using CSS instead of HTML for these kinds of tasks. I’ll mention both methods below, but if you can, it’s better to use CSS since it’s more adaptable to responsive website designs.

Wrap Text Around Image using HTML

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque nunc in lorem egestas non imperdiet enim congue.

In order to have the text wrap along the right side of the image, you have to align the picture to the left:

<img src="IMAGE URL" align="left" /><p>Your text goes here.</p>

If you want the text to appear on the left and the image to appear at the far right, just change the align parameter to “right”.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque nunc in lorem egestas non imperdiet enim congue.

<img src="IMAGE URL" align="right" /><p>Your text goes here.</p>

That’s it! Pretty easy right? The only time you would want to use CSS is if you want to add margins to the pictures, so that there is some space between the text and the image.

You can add margins to a picture by using the following CSS styling code:

<img src=”IMAGE URL” align=”left” style=”margin: 0px 10px 0px 0px;” /><p>Your text goes here.</p>

The above code uses the MARGIN CSS element to add 10 pixels of whitespace on the right side of the image. Since we have aligned the image left, we want to add the whitespace to the right.

Basically, the four numbers represent TOP RIGHT BOTTOM LEFT. So if you want to add the white space to a right-aligned image, you would do this:

<img src=”IMAGE URL” align=”right” style=”margin: 0px 0px 0px 10px;” /><p>Your text goes here.</p>

So it’s fairly simple to use HTML to perform this task, but once again, it may not work well for responsive sites.

Wrap Text Around Image using CSS

The better way to wrap text around an image is to use CSS. It’s gives you more fine grain control over the positioning of the elements and works better with modern coding standards.

<img src="IMAGE URL" alt="A photo" class="left" />

Even though I included CSS directly into the image tag in the HTML example, you really should never do that anymore either. Instead, you should have a separate file called a stylesheet that holds all of your CSS code.

In the IMG tag, you simply assign a class to the tag and give it a name. In my example, I named the class left. In my stylesheet, all I have to do is add the following code:

.left {
 float: left;
 padding: 0 10px 0 0;}

As you can see, I added 10px of padding to the right side of the left-aligned image. I also used the float property to move the image out of the normal flow of the document and put it to the left side of the parent container.

As you can see, it’s much cleaner than adding all that code to the IMG tag itself. It’s also easier to manage and you can use a lot more CSS properties to customize the look on your webpage. If you have any questions, feel free to comment. Enjoy!

Related posts

• Cómo escanear un código QR en iPhone y Android

• Cómo imprimir mensajes de texto desde Android

• Guardar una lista de procesos en ejecución en un archivo de texto en Windows

• Cómo descargar archivos y ver código desde GitHub

• Buscar dentro de varios archivos de texto a la vez

• Sitios y servicios de Online OCR gratis para extraer Text de Image

• Extraiga texto de archivos PDF y de imagen

• Desactivar el Control de cuentas de usuario (UAC) para una aplicación específica

• Instalación de complementos de GIMP: una guía práctica

• Cómo mantener activa su PC con Windows sin tocar el mouse

• Cómo agregar Shadow a Text or Image en GIMP

• Cómo vincular cuadros de texto en Adobe InDesign

• Cómo deshabilitar la clave de Windows

• Cómo PIN Text and Image A Clipboard History EN Windows 10

• Reseña del libro: la guía práctica de Windows 8

• Elimine instantáneamente los fondos de las imágenes usando AI

• Cómo ver el código fuente de un software de código abierto

• Cómo hacer que su computadora lea texto en voz alta

• Cómo abrir archivos de imagen EPS en Windows

• SynWrite Editor: Free Text & Source Code Editor para Windows 10