1

Estoy haciendo una web con html y css. Quiero poner un encabezado. El código HTML5 que empleo es el siguiente:

<body>
    <section>
        <div class="imagenMuslito">
            <img src="muslito25.jpg" alt="Dibujo muslito pollo">
        </div>
        <div class="elMuslito">
            <h1>El muslito</h1>
        </div>
    </section>
</body>

CSS:

.elMuslito {
  /*float: left;*/
  margin-left: 200px;
  margin-top: 80px;
}

.imagenMuslito {
  float: left;
  margin-left: 20px;
  margin-top: 0px;
}

Con el CSS ahora solo pretendo que estén al mismo nivel Imagen y texto. Pero cuando le doy más margin-top al H1 tambien lo toma la imagen. Lo cual no entiendo porque están en bloques div diferentes.

Inserto la imagen del resultado. introducir la descripción de la imagen aquí

Como los pongo al mismo nivel?? Porque el código que empleo no los pone al mismo nivel??

1
  • es.acervolima.com/…. Aquí un ejemplo claro para lo que necesitas, aunque yo te recomendaría investigar Bootstrap, te va a facilitar un poco la vida :)
    – ml0x
    Commented el 10 nov. 2022 a las 15:44

1 respuesta 1

3

es mas simple de lo que intentas necesitas hacer esto:

<section>
    <div class="imagenMuslito">
        <img src="muslito25.jpg" alt="Dibujo muslito pollo">
    </div>
    <div class="elMuslito">
        <h1>El muslito</h1>
    </div>
</section>

y en el css solo esto:

section{
    display: flex;
    flex-direction: row;
    align-items: center;
}

luego ya puedes perzonalizarlo como quieras.

1
  • Perfecto tio!!!! Gracias
    – RHAAPHAA
    Commented el 10 nov. 2022 a las 16:12

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.