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

sabogal Seguir

VIP
Delta
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Verificado por Binance
Suscripción a IA
Desde
23 Ago 2011
Mensajes
577
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....
 

Andresser17

Beta
Verificación en dos pasos activada
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
1 Ene 2018
Mensajes
41
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.
 

Creations

Beta
Verificación en dos pasos activada
Verificado por Whatsapp
Verificado por Binance
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
4 Nov 2009
Mensajes
111
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 😁
 

Ángeluz23

Beta
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
14 Feb 2023
Mensajes
124
intersante hermano
 

Matiasgq

Delta
Programador
Verificación en dos pasos desactivada
Desde
3 Jun 2013
Mensajes
696
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.
 

Dezzed

No recomendado
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
3 Abr 2023
Mensajes
55
La AI está arrazando con todo, vaya locura. 😅
 

Ángeluz23

Beta
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
14 Feb 2023
Mensajes
124
Que genial muchas gracias!
 

moiseseccam

Pi
Verificado
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
5 Mar 2013
Mensajes
6.187
No se a lo que llames complejo, pero GPT-4 es bueno para evitar buscar en Stackoverflow
 

ultracobra

Ni
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
12 Abr 2017
Mensajes
3.874
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...
 

¡Regístrate y comienza a ganar!

Beneficios

  • Gana dinero por participar
  • Gana dinero por recomendarnos
  • Descubre ofertas de empleo diariamente
  • Negocios seguros
  • ¡Información premium y más!

Acceder

¿Ya tienes una cuenta? Accede aquí

Arriba