Me quiero centrar un formulario que contiene dos entradas(nombre de usuario y contraseña):

<h2 align="center" >Authentication</h2>
<form method="post" action="/signin"  class="form-horizontal" role="form" align="center">
    <div class="form-group" align="center">
        <label class="control-label col-sm-2"  for="username">username<em>*</em></label>
        <div class="col-sm-6">
            <input type="text" name="username" id="username" placeholder="username" required="true" class="form-control"/>
        </div>
    </div>  
    <div class="form-group">
        <label class="control-label col-sm-2" for="password">password<em>*</em></label>
        <div class="col-sm-6">            
            <input type="password" name="password" id="password" required="true" class="form-control"/> 
        </div>
    </div>
    <div class="form-group"> 
        <div class="col-sm-offset-2 col-sm-8">  
            <input type="submit" name="signin" id="signin" value="sign in" class="btn btn-default"/>
         </div>
     </div>     
</form>

pero cuando voy a ejecutar la página, el formulario no está en el centro de la página. He añadido en el estilo.css:

.form-horizontal{
    display:block;
    margin-left:auto;
    margin-right:auto;
}

pero que no funcionó.

  • Ajuste de los márgenes para auto, por supuesto, sólo funciona si el ancho del elemento es menor que el del elemento contenedor.
InformationsquelleAutor Slim Hmidi | 2015-07-06

4 Comentarios

  1. 1

    Slim Hmidi Hola, Que estaban cerca con su clase de .form-horizontal.

    El uso de este se centro de el formulario en el centro de la página.

    .center {
      position: absolute;
      left: 0;
      right: 0;
      margin: auto;  
    }

    Sólo que ahora se necesita para ajustar el col-sm-xx en el formulario a rellenar y que funcione correctamente en todos los tamaños de pantalla.

    Aquí está una captura de pantalla, el azul del div que contiene el formulario está centrada horizontalmente.

    Cómo el centro de un formulario utilizando Bootstrap?

    Aquí es la forma con las clases en la forma modificada para llenar y trabajar en todos los tamaños de pantalla.

    Cómo el centro de un formulario utilizando Bootstrap?

    HTML:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">
    <title>How to center a form using Bootstrap</title>
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <style>
    body {
    padding-top: 50px;
    }
    .spacer {
    margin-top: 2%;
    margin-bottom: 2%;
    }      
    .block {
    height: 300px;
    padding-top: 15px;  
    background-color: darkorange;
    }  
    .block2 {
    min-height: 160px;
    padding-top: 15px; 
    } 
    .center {
    position: absolute;
    /*  top: 0;
    bottom: 0; */
    left: 0;
    right: 0;
    margin: auto;  
    }
    </style>
    </head>
    <body>
    <nav class="navbar navbar-inverse navbar-fixed-top ">
    <div class="container">
    <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand " href="#">Project name</a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
    <ul class="nav navbar-nav navbar-right">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
    </ul>
    </div><!--/.nav-collapse -->
    </div>
    </nav>
    <div class="container col-lg-12 spacer"></div>
    <div class="container col-lg-12 block">
    <div class="row col-xs-6 block2 bg-primary center">
    <form method="post" action="/signin"  class="form-horizontal" role="form" align="center">
    <div class="form-group" >
    <label class="control-label col-sm-3"  for="username">username<em>*</em></label>
    <div class="col-sm-8 col-xs-12">
    <input type="text" name="username" id="username" placeholder="username" required="true" class="form-control"/>
    </div>
    </div>  
    <div class="form-group">
    <label class="control-label col-sm-3" for="password">password<em>*</em></label>
    <div class="col-sm-8 col-xs-12">            
    <input type="password" name="password" id="password" required="true" class="form-control"/> 
    </div>
    </div>
    <div class="form-group"> 
    <div class="col-sm-offset-2 col-sm-8">  
    <input type="submit" name="signin" id="signin" value="sign in" class="btn btn-default"/>
    </div>
    </div>     
    </form>
    </div>
    </div><!-- /.container -->
    <!-- Bootstrap core JavaScript -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    </body>
    </html>

  2. 3

    Centrar un div en la página, usted necesita para establecer el ancho de su contenedor, a continuación, aplicar margin:0 auto; y será el centro a la izquierda y a la derecha de la página.

    .form-horizontal{
    display:block;
    width:50%;
    margin:0 auto;
    }

    Si desea centrar el texto, sólo tiene que añadir el texto-centro para la clase del div su texto es en. Bootstrap hará el resto.

    Editar 1

    <div class="contact-form">
    <h2 align="center" >Authentication</h2>
    <form method="post" action="/signin"  class="form-horizontal" role="form" align="center">
    <div class="form-group" align="center">
    <label class="control-label col-sm-2"  for="username">username<em>*</em></label>
    <div class="col-sm-6">
    <input type="text" name="username" id="username" placeholder="username" required="true" class="form-control"/>
    </div>
    </div>  
    <div class="form-group">
    <label class="control-label col-sm-2" for="password">password<em>*</em></label>
    <div class="col-sm-6">            
    <input type="password" name="password" id="password" required="true" class="form-control"/> 
    </div>
    </div>
    <div class="form-group"> 
    <div class="col-sm-offset-2 col-sm-8">  
    <input type="submit" name="signin" id="signin" value="sign in" class="btn btn-default"/>
    </div>
    </div>     
    </form>
    </div>
    • Tengo un problema con la etiqueta h2 ahora.Es desplazado en comparación con la forma
    • Deberá ajustar la forma y el h2 en un div, a continuación, aplicar el estilo a ese div.
  3. 1

    Envuelva todo el formulario en <div class="container">your form HTML</div>.

    Como este: http://codepen.io/anon/pen/pJLrOq. Centros de código de formulario contenedor a la mitad de un sitio. Edición de CSS y el texto de entrada de las clases para obtener el diseño que desee.

  4. 0

    Puede agregar text-align: center; en css .

    • Lo he probado,el mismo problema
    • Ok,intentar de .formulario-grupo{text-align:center; }por Favor cierra la pregunta cuando usted tiene la respuesta correcta.

Dejar respuesta

Please enter your comment!
Please enter your name here