Estoy tratando de centrar dos áreas de texto en un formulario, sin embargo el css no hace nada si le agrego el estilo de bootstrap.
¿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("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="); 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("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="); 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>