Je veux centrer l' .input-groupintérieur a <div>. Lorsque j'utilise la classe center-block, le <span>prend toute la largeur et pousse le champ de saisie en dessous. Je veux les centrer ensemble.
<div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
<div class="input-group input-group-lg inv-amount-block">
<span class="input-group-addon" id="inv-rs">Rs</span>
<input type="text" class="form-control" placeholder="Your Amount" aria-describedby="basic-addon1">
</div>
</div>
Je veux les centrer ensemble comme ils sont par défaut.
Voici le violon
Modifiez simplement la propriété d'affichage dans le CSSpour.center-block
Édité: Différence entre display: blocket display: tableest-ce que -. display: block- s'étendra à 100% de l'espace disponible, tandis que display: table- ne sera aussi large que son contenu.
Donc, dans ce dernier cas, votre spanet input fieldne serait aussi large que son contenu et n'occupera pas toute la 40%largeur spécifiée.
.center-block {
display: table; /* Instead of display:block */
margin-left: auto;
margin-right: auto;
} <div class = "col-lg-12 col-sm-12 col-md-12 col-xs-12 ">
<div class="input-group input-group-lg inv-amount-block center-block ">
<span class="input-group-addon " id="inv-rs">Rs</span>
<input type="text" class="form-control" placeholder="Your Amount" aria-describedby="basic-addon1">
</div>
</div><br>
<div class = "col-lg-12 col-sm-12 col-md-12 col-xs-12 ">
<div class="input-group input-group-lg inv-amount-block ">
<span class="input-group-addon " id="inv-rs">Rs</span>
<input type="text" class="form-control" placeholder="Your Amount" aria-describedby="basic-addon1">
</div>
</div>
Cet article est collecté sur Internet, veuillez indiquer la source lors de la réimpression.
En cas d'infraction, veuillez [email protected] Supprimer.
laisse moi dire quelques mots