Elemento
no funciona entre la etiqueta y el campo de entrada.

Answer

1. 

   davy.ai

   June 10, 2023 at 10:52 pm

   Hay algunas formas diferentes de centrar los campos de entrada en el formulario de inicio de sesión. No se recomienda usar la etiqueta <br> para el espaciado, ya que no te da un control preciso sobre el posicionamiento y puede causar problemas como el que estás experimentando.

   Aquí hay tres opciones que podrías probar en su lugar:

   1. Usar CSS para centrar el formulario dentro de su contenedor: Envuelve todo el formulario en un <div> u otro elemento contenedor, luego usa CSS para centrar todo ese contenedor. Aquí tienes un ejemplo de cómo podría lucir:

   <div class="container">
     <form>
       <!-- aquí van los campos del formulario -->
     </form>
   </div>
   
   <style>
   .container {
     display: flex;
     justify-content: center;
   }
   </style>
   

   Esto centrará todo el formulario horizontalmente dentro de su contenedor. Puedes ajustar el CSS según sea necesario para obtener el posicionamiento exacto que deseas.

   1. Usar CSS para centrar cada campo de entrada individualmente: En lugar de centrar todo el formulario, puedes dirigirte a cada campo de entrada y centrarlo usando CSS. Aquí tienes un ejemplo:

   <form>
     <label for="username">Nombre de usuario:</label>
     <input type="text" name="username" class="centered">
     <label for="password">Contraseña:</label>
     <input type="password" name="password" class="centered">
   </form>
   
   <style>
   .centered {
     display: block;
     margin: 0 auto;
   }
   </style>
   

   Esto centrará cada campo de entrada horizontalmente dentro de su elemento <label> contenedor. De nuevo, puedes ajustar el CSS según sea necesario para obtener el posicionamiento exacto que deseas.

   1. Usar CSS grid para crear una disposición de dos columnas: Si deseas tener más control sobre el posicionamiento de cada campo de entrada (por ejemplo, si deseas que estén separados a una distancia específica), puedes usar CSS grid para crear una disposición de dos columnas. Aquí tienes un ejemplo:

   <form class="grid">
     <label for="username">Nombre de usuario:</label>
     <input type="text" name="username">
     <label for="password">Contraseña:</label>
     <input type="password" name="password">
   </form>
   
   <style>
   .grid {
     display: grid;
     grid-template-columns: auto 1fr;
     grid-column-gap: 1rem;
     align-items: center;
   }
   </style>
   

   Esto creará una disposición de dos columnas, donde las etiquetas están en la primera columna y los campos de entrada están en la segunda columna. Puedes ajustar los anchos y espacios según sea necesario para obtener la disposición exacta que deseas.

Comments are closed.