0

Las imágenes no se alinean es como si una imagen tuviera un bloque por así decirlo mas grande que la otra y lo máximo que se alinea es como se muestra en la imagen.

Agrego código HTML y CSS

Foto de la pagina

.logo {
  display: inline-block;
}

.nombre {
  display: inline-block;
}

.logo img:first-child {
  margin-right: 10px;
}
<div class="logo">
  <img src="Imagenes/logo.png" width="70" ; alt="icono" ; title="GastroBlog" ; />
</div>
<div class="nombre">
  <img src="Imagenes/nombre.png" width="200" ; alt="name" ; title="GastroBlog" ; />
</div>

2
  • Debes tener algún conflicto en el CSS. Le agregué un snippet a tu pregunta y las imágenes se alinean tal como sugieres que deberían estar. Intenté también con algunas imágenes de picsum.photos y funciona perfecto. Ah no ser que tu contenedor sea menor de 270px de ancho.
    – DjCrazy
    el 17 ago. 2022 a las 0:49
  • Muchas gracias por tu ayuda , fue un error con el tamaño de las imágenes pero ya lo solucione.
    – not_number
    el 18 ago. 2022 a las 1:49

2 respuestas 2

1

Lo que puedes hacer es poner las 2 imágenes en un contenedor con el atributo display: flex;. Te dejo un ejemplo:

.logo{
  display: flex;
}
<div class="logo">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Facebook_Logo_%282019%29.png/800px-Facebook_Logo_%282019%29.png" width="70"; alt="icono"; title="GastroBlog";/>
  <img src="https://logodownload.org/wp-content/uploads/2014/09/facebook-logo-15.png" width="200"; alt="name"; title="GastroBlog";/>
</div>

2
  • Ya lo acabo de hacer y queda igual solo que ahora el logo esta arriba
    – not_number
    el 17 ago. 2022 a las 0:51
  • Holaa, muchas gracias por tu sugerencia resulta que era un error por el tamaño de las imágenes aunque estaba en png la imagen no era toda solo del logo tenia espacios .
    – not_number
    el 18 ago. 2022 a las 1:48
1

¡Hola! bueno, yo te recomendaría que pusieras una caja contenedor primero. No sé si vas a ocupar todo el viewport, pero para que sean alineadas se añadería un Flexbox. sería así:

<div class= "container">
 <div class="logo">
      <img src="Imagenes/logo.png" alt="icono"; title="GastroBlog";/>
    </div>
    <div class="nombre" >
      <img src="Imagenes/nombre.png" alt="name"; title="GastroBlog";/>
    </div>
</div>


   .container {
      width: 100%;
      height: 250px; (este es un ejemplo)
      display:flex;
    }

Yo te aconsejaría usar flexbox para mejor acomodo, pero las cajas de nombre y logo tienen que tener el mismo tamaño.

.logo, .nombre {
width: 250px; 
heigth: 250px; 
}

Para que las imagenes no queden tan estrechas ni pixeleadas, te recomiendo usar este código en css

.logo, .nombre img{
width: 100%;
heigth; 100%;

}

solamente con tu margin juega que tan pegadas quieres ambas imágenes, pero estoy segura que con lo que te acabo de escribir te va a quedar centrado. No es recomendado agregar un tamaño directo a la imagen. Muchos saludos

1
  • Muchas gracias por tu ayuda
    – not_number
    el 18 ago. 2022 a las 1:49

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.