center table-cell

Navigation
1

I am trying to center two text areas on a form, however the bootstrap .

Does anyone know how I can center them with the display:table that the bootstrap adds? 

.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>
    
asked by Ruslan López 13.07.2016 в 17:18
source

1 answer

2

Thanks for your interest, I already solved the trick was to put automatic margin on the right and left side. 

.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>
    
answered by 13.07.2016 в 17:50
Problem with program in C, scanf does not respond Txt file is not created in C: //