0

tengo una pregunta, cuando quiero poner una imagen a la izquierda, pero por más que lo intento, no lo consigo, alguien me puede ayudar? pongo el html y css:

<div class="flecha">
            <br>
            <section id="flecha">
                <div><img class="imagendecentro" src="https://images.vexels.com/media/users/3/135678/isolated/preview/6249ee44af81d1f8a400be3246d0bb39-icono-de-circulo-de-almacenamiento-en-la-nube.png" alt="logo del almacenamiento"></div>
                <div class="unificacion"><h3>Almacenamiento</h3>
                <p>Almacenamiento de 64GB, perfecto para cualquier tipo de archivo de gran tamaño. Se puede usar para videos y fotos
                    con un peso considerable, puede incluso usarse para hacer una instalación limpia de Windows 10 y ser ejecutada 
                    desde el mismo.
                </p></div>
            </section>
        </div>

Y el css:

#flecha {
display: flex;

}

.unificacion {
display: flex;
flex-direction: column;
justify-content: center;
height: 125px;
width: 80vw;
padding: 5px;

}

div p {
margin: 0px;
text-align: left;
font-size: 16px;

}

div h3 {
margin-bottom: 0px;
font-size: 24px;

}

quiero que el icono se quede en el centro, pero no lo consigo, esta es la imagen. (PD: me estoy iniciando en el html, soy muy nuevo, 3 días, no me peguen si es fácil :()

introducir la descripción de la imagen aquí

1 respuesta 1

1

Parcialmente lo estás haciendo bien. Debes agregarle a #flecha .flecha Tres propiedades importantes: el ancho, el flex y el align. Ya que #Flecha es el elemento padre, de igual forma lo haces con la clase .flecha

Lo importante aqui para lo que requieres es colocarle la propiedad flex-wrap: wrap al section.flecha para indicarle que los dos divs van a permanecer cada uno en una linea.

    #flecha, .flecha{
        width:100%;
        display: flex;
        justify-content: center;
    }

    .flecha {
        flex-wrap: wrap; /* HE AQUI LA MAGIA */
    }

    .unificacion {
        height: 125px;
        width: 100%;
        padding: 5px;
    }

    div p {
        margin: 0px;
        font-size: 16px;
    }

    div h3 {
        margin-bottom: 0px;
        font-size: 24px;
    }
    
    img{
        width:200px;
    }
<div id="flecha">
    <section class="flecha">
        <div>
            <img src="https://images.vexels.com/media/users/3/135678/isolated/preview/6249ee44af81d1f8a400be3246d0bb39-icono-de-circulo-de-almacenamiento-en-la-nube.png" alt="logo del almacenamiento">
        </div>
        <div class="unificacion">
            <h3>Almacenamiento</h3>
            <p>Almacenamiento de 64GB, perfecto para cualquier tipo de archivo de gran tamaño. Se puede usar para videos y fotos
            con un peso considerable, puede incluso usarse para hacer una instalación limpia de Windows 10 y ser ejecutada 
            desde el mismo.
            </p>
        </div>
    </section>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.