Cómo centrar verticalmente una imagen en un contenedor con CSS flexbox

  • Autor Autor sabogal
  • Fecha de inicio Fecha de inicio
sabogal

sabogal

Épsilon
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Verificado por Binance
Cómo centrar verticalmente una imagen en un contenedor es una pregunta que he visto por ahí más de una vez, así que probé preguntar en chat.openai y esto es lo que respondió en 30 segundos:
Insertar CODE, HTML o PHP: 
.contenedor-imagen {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* opcional, para establecer la altura del contenedor */
}

.imagen {
  max-width: 100%; /* opcional, para ajustar el tamaño de la imagen al contenedor */
}
Ya es mejor preguntarle en openai que preguntar en forobeta.
He conseguido que openaai me haga códigos más complejos, como una encuesta en php y MySQL, con formulario html y css, todo completo....
 
Este ejemplo es sencillo, algo que encuentras en 30 segundos con una busqueda en Google.

Por ahora OpenAI parece un Google ultravitaminado.Y asi creo que es como lo usara la gran mayoria de sus usuarios.
 
Ojo que no siempre te muestra la mejor solución. Tambien podrías centrar la imágen con grid:

CSS: 
.contenedor-imagen {
    display: grid;
    place-content: center;
    height: 100vh;
}

Aunque al final con que haga el trabajo es suficiente 😁
 
intersante hermano
 
Si no también se puede utlizar.
CSS: 
vertical-align:top;

Hay muchisimas formas de alinear los items. No se si la respuesta de chat.openai fue la más optima en este caso.
 
La AI está arrazando con todo, vaya locura. 😅
 
Que genial muchas gracias!
 
No se a lo que llames complejo, pero GPT-4 es bueno para evitar buscar en Stackoverflow
 
Yo me he apoyado en ChatGPT para hacer algunas cosas pero me interesa eso de "una encuesta en php y MySQL, con formulario html y css, todo completo"
Me gustaría verlo, o hasta hacer mi versión pero igual de interesante comparar resultados finales...
 
Hay que estar conectado o registrado para responder aquí.
Atrás
Arriba