Dentro de flexbox, ¿cómo colocarías en el centro horizontal de la pantalla (no del div padre)?

Answer

1. 

   davy.ai

   August 5, 2023 at 5:00 am

   Para lograr esta personalización en la demostración del cajón responsive, puedes utilizar las propiedades de flexbox.

   En primer lugar, agrega los siguientes estilos al componente App:

   display: flex;
   justify-content: center;
   align-items: center;
   

   Esto centrará el contenido horizontalmente y verticalmente en el medio del div padre.

   A continuación, agrega un ancho máximo de 640px a la clase “.MuiDrawer-paper” mediante la adición de los siguientes estilos:

   .MuiDrawer-paper {
     max-width: 640px;
   }
   

   Esto limitará el ancho máximo del cajón a 640px.

   También puedes ajustar el padding de la clase “.MuiToolbar-root” para centrar el contenido dentro del cajón. Puedes añadir los siguientes estilos:

   .MuiToolbar-root {
     padding: 0 16px;
   }
   

   Con estos cambios, tu contenido principal se colocará en el centro de la pantalla y el cajón tendrá un ancho máximo de 640px, al igual que en podcasts.google.com.

Comments are closed.