Cómo alinear una imagen a un lado en HTML

Cuando se coloca un párrafo de texto al lado de una imagen en un archivo HTML, la primera línea aparece al lado de la parte superior de la imagen y el resto se arrastró debajo de ella. Si tiene previsto otro objeto al lado de una imagen, se pone su propia línea independientemente. Mediante la creación de clases en una hoja de estilo en cascada y con el atributo "flotar", puede anular esta configuración predeterminada. Al mismo tiempo, es posible elegir cuándo y dónde desea alinear las imágenes a lo largo de todo su sitio web.

Instrucciones

1 Abra su archivo CSS e insertar el cursor en una nueva línea al final del archivo.

2 Escribe lo siguiente para crear una clase para alinear las imágenes a la izquierda:

img.floatLeft {

flotador izquierdo;

}

3 Escribe lo siguiente para crear una clase para alinear las imágenes a la derecha:

img.floatRight {

flotar derecho;

}

4 Guarde y cierre el archivo CSS.

5 Abrir un archivo HTML. Insertar el cursor donde desea colocar una imagen con una alineación.

6 Escriba lo siguiente:

<Img class = "floatRight">

Reemplazar "imagen.jpg" con el nombre de la imagen que desea utilizar. Esto se alinea la imagen a la derecha de la pantalla y cualquier texto que aparece junto a ella y se envuelve debajo de ella si existe mucho texto. Cambiar la clase de "floatLeft" para alinear la imagen en el lado izquierdo.

7 Guarde el archivo HTML. Subirlo y el archivo CSS en el servidor Web.