1

Estoy tratando de centrar dos áreas de texto en un formulario, sin embargo el no hace nada si le agrego el estilo de .

¿Alguien sabe cómo puedo centrarlos con el display:table que le agrega el bootstrap?

.input-group {
  text-align: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet" />
<div class="col-md-6 col-sm-12  col-xs-12 bs-callout bs-callout-primary text-center">

  <h3 class="cuenta-titulo">Inicie sesión</h3>
  <br>

  <form autocomplete="off" id="login_form" name="login_form" action="j_security_check" method="post" accept-charset="utf-8" enctype="application/x-www-form-urlencoded">

    <div class="form-group has-feedback">
      <div class="input-group">
        <span class="input-group-addon text-center">* Usuario</span> 
        <input type="text" class="form-control" id="usuario" placeholder="Usuario" style="width: 60%; cursor: auto; background-image: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAASCAYAAABSO15qAAAAAXNSR0IArs4c6QAAAZ9JREFUOBGVU7uKwkAUPXmID5AttNyFYBGwsLGwFBUFF/wOhfyE5jPcxkZt/IHFxg+wsZJtrFwS8NWIohZm545xNkp8XcjMnbnnnJk790YyTfPTcZwm+z7whEmSNGWwaqPR+Ca4/AqZCO5BX+STkcBTJ5/gp9HLkb2BR34kEoGu6xewlwQ0TUOxWPQXCIVCIhAMBsEeS6y9MbHpOirNlUoF6XQanU4Hq9UKhmHAsiy0Wq2L2DWZ1i+l4Ccg1et1hwJ0zd1uxzGUwn6/98OLPZbiL1vUxA3OZEI8IhOGlfKdTU3+BrThZ5lMBoVCAev1Gr1eD7PZDIFAALIs80NIRNzAT4DIw+EQm80G2WyWQ1KpFHK5nICr1NvezhIR5iyXSyQSCUSjUSiKgnK5jGQyCVVVEYvF0O12oeTz+R+GJfk3L5n8yWTC+yEej3OxwWCA4/GI7XaLfr/P0/jvlis2VadUKvH+IFK73YZt2yCxcDiM6ZR+SuDuI45GI4zHY8zncxwOB05YLBZ8Pg83BajOjEilummEuVeFmtssvgJurPYHGEKbZ/T0eqIAAAAASUVORK5CYII=&quot;); background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%; background-repeat: no-repeat;"
        required="" autocomplete="off">
      </div>
      <br>

      <div class="input-group">
        <span class="input-group-addon">* Contraseña</span> 
        <input type="password" class="form-control" id="j_password" placeholder="Contaseña" style="width: 60%; background-image: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAASCAYAAABSO15qAAAAAXNSR0IArs4c6QAAAZ9JREFUOBGVU7uKwkAUPXmID5AttNyFYBGwsLGwFBUFF/wOhfyE5jPcxkZt/IHFxg+wsZJtrFwS8NWIohZm545xNkp8XcjMnbnnnJk790YyTfPTcZwm+z7whEmSNGWwaqPR+Ca4/AqZCO5BX+STkcBTJ5/gp9HLkb2BR34kEoGu6xewlwQ0TUOxWPQXCIVCIhAMBsEeS6y9MbHpOirNlUoF6XQanU4Hq9UKhmHAsiy0Wq2L2DWZ1i+l4Ccg1et1hwJ0zd1uxzGUwn6/98OLPZbiL1vUxA3OZEI8IhOGlfKdTU3+BrThZ5lMBoVCAev1Gr1eD7PZDIFAALIs80NIRNzAT4DIw+EQm80G2WyWQ1KpFHK5nICr1NvezhIR5iyXSyQSCUSjUSiKgnK5jGQyCVVVEYvF0O12oeTz+R+GJfk3L5n8yWTC+yEej3OxwWCA4/GI7XaLfr/P0/jvlis2VadUKvH+IFK73YZt2yCxcDiM6ZR+SuDuI45GI4zHY8zncxwOB05YLBZ8Pg83BajOjEilummEuVeFmtssvgJurPYHGEKbZ/T0eqIAAAAASUVORK5CYII=&quot;); background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%; background-repeat: no-repeat;"
        required="" autocomplete="off">
      </div>


      <br>

      <div class="input-group input-group-lg">
        <span class="input-group-addon" id="sizing-addon1">
                                    <img src="simpleCaptcha.jpg" id="captcha" alt="captcha">
                                </span>

        <input type="text" style="height:72px;font-size: 1.71em; width: 90%;" class="form-control text-center" id="j_captcha" name="j_captcha" placeholder="Ingresa el código" required="">
      </div>

      <br>

      <input type="submit" value="Entrar" class="btn btn-primary text-center" style="height:40px; font-size: 1.71em;  background: #958c63;border-color: #958c63;">

    </div>
  </form>
</div>

1 respuesta 1

2

Gracias por su interés, ya lo resolví el truco fue ponerle margen automático del lado derecho e izquierdo.

.input-group span {
  width: 40%;
}
.input-group {
  margin: 0px auto;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet" />
<div class="col-md-6 col-sm-12  col-xs-12 bs-callout bs-callout-primary text-center">

  <h3 class="cuenta-titulo">Inicie sesión</h3>
  <br>

  <form autocomplete="off" id="login_form" name="login_form" action="j_security_check" method="post" accept-charset="utf-8" enctype="application/x-www-form-urlencoded">

    <div class="form-group has-feedback">
      <div class="input-group">
        <span class="input-group-addon text-center">* Usuario</span> 
        <input type="text" class="form-control" id="usuario" placeholder="Usuario" style="width: 60%; cursor: auto; background-image: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAASCAYAAABSO15qAAAAAXNSR0IArs4c6QAAAZ9JREFUOBGVU7uKwkAUPXmID5AttNyFYBGwsLGwFBUFF/wOhfyE5jPcxkZt/IHFxg+wsZJtrFwS8NWIohZm545xNkp8XcjMnbnnnJk790YyTfPTcZwm+z7whEmSNGWwaqPR+Ca4/AqZCO5BX+STkcBTJ5/gp9HLkb2BR34kEoGu6xewlwQ0TUOxWPQXCIVCIhAMBsEeS6y9MbHpOirNlUoF6XQanU4Hq9UKhmHAsiy0Wq2L2DWZ1i+l4Ccg1et1hwJ0zd1uxzGUwn6/98OLPZbiL1vUxA3OZEI8IhOGlfKdTU3+BrThZ5lMBoVCAev1Gr1eD7PZDIFAALIs80NIRNzAT4DIw+EQm80G2WyWQ1KpFHK5nICr1NvezhIR5iyXSyQSCUSjUSiKgnK5jGQyCVVVEYvF0O12oeTz+R+GJfk3L5n8yWTC+yEej3OxwWCA4/GI7XaLfr/P0/jvlis2VadUKvH+IFK73YZt2yCxcDiM6ZR+SuDuI45GI4zHY8zncxwOB05YLBZ8Pg83BajOjEilummEuVeFmtssvgJurPYHGEKbZ/T0eqIAAAAASUVORK5CYII=&quot;); background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%; background-repeat: no-repeat;"
        required="" autocomplete="off">
      </div>
      <br>

      <div class="input-group">
        <span class="input-group-addon">* Contraseña</span> 
        <input type="password" class="form-control" id="j_password" placeholder="Contaseña" style="width: 60%; background-image: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAASCAYAAABSO15qAAAAAXNSR0IArs4c6QAAAZ9JREFUOBGVU7uKwkAUPXmID5AttNyFYBGwsLGwFBUFF/wOhfyE5jPcxkZt/IHFxg+wsZJtrFwS8NWIohZm545xNkp8XcjMnbnnnJk790YyTfPTcZwm+z7whEmSNGWwaqPR+Ca4/AqZCO5BX+STkcBTJ5/gp9HLkb2BR34kEoGu6xewlwQ0TUOxWPQXCIVCIhAMBsEeS6y9MbHpOirNlUoF6XQanU4Hq9UKhmHAsiy0Wq2L2DWZ1i+l4Ccg1et1hwJ0zd1uxzGUwn6/98OLPZbiL1vUxA3OZEI8IhOGlfKdTU3+BrThZ5lMBoVCAev1Gr1eD7PZDIFAALIs80NIRNzAT4DIw+EQm80G2WyWQ1KpFHK5nICr1NvezhIR5iyXSyQSCUSjUSiKgnK5jGQyCVVVEYvF0O12oeTz+R+GJfk3L5n8yWTC+yEej3OxwWCA4/GI7XaLfr/P0/jvlis2VadUKvH+IFK73YZt2yCxcDiM6ZR+SuDuI45GI4zHY8zncxwOB05YLBZ8Pg83BajOjEilummEuVeFmtssvgJurPYHGEKbZ/T0eqIAAAAASUVORK5CYII=&quot;); background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%; background-repeat: no-repeat;"
        required="" autocomplete="off">
      </div>


      <br>

      <div class="input-group input-group-lg">
        <span class="input-group-addon" id="sizing-addon1">
                                    <img src="simpleCaptcha.jpg" id="captcha" alt="captcha">
                                </span>

        <input type="text" style="height:72px;font-size: 1.71em; width: 90%;" class="form-control text-center" id="j_captcha" name="j_captcha" placeholder="Ingresa el código" required="">
      </div>

      <br>

      <input type="submit" value="Entrar" class="btn btn-primary text-center" style="height:40px; font-size: 1.71em;  background: #958c63;border-color: #958c63;">

    </div>
  </form>
</div>

2
  • 2
    Una mejora mínima a tu css: no hay necesidad de ponerle unidades de medida (px en este caso) cuando utilizas el valor 0.
    – Shaz
    Commented el 13 jul. 2016 a las 15:53
  • Gracias @Shaz deberías de considerar unirte a la comunidad codereview de stackexchange Commented el 30 jun. 2017 a las 17:54

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.