Bootstrap Centre d'aligner une div horizontalement
J'ai essayé de simple page de connexion pour un échantillon. Mais je suis incapable d'aligner les champs de centre. h:commandButton
est aligné au centre. mais le repos des champs n'ont pas de changement, tout en garder <div align="center">
Comment faire pour garder leur centre alignés?
<div align="center">
<h:message for="btnSubmit"/>
<div class='form-row'>
<div class='col-xs-2 form-group required'>
<label class='control-label'> User Name </label>
<h:inputText styleClass="form-control" size="12" maxlength="20"
id="userName" value="#{loginController.userName}"
required="true"/>
</div>
</div>
<div class='form-row'>
<div class='col-xs-2 form-group card required'>
<label class='control-label'>Password</label>
<h:inputText styleClass="form-control" size="12" maxlength="20"
id="password" value="#{loginController.password}"
required="true" />
</div>
</div>
<div class='form-row'>
div class='col-md-12 form-group'>
<h:commandButton styleClass="btn btn-success"
value="#{bundle['label.Login']}" id="btnSubmit"
action="#{loginController.clientLoginAction}"/>
</div>
</div>
</div>
Si vous ajoutez un violon jsfiddle.net) vous aurez de chance d'obtenir une réponse encore plus rapide!
OriginalL'auteur Teja Maridu | 2014-01-06
Vous devez vous connecter pour publier un commentaire.
façon la plus simple est d'ajouter une classe personnalisée
.col-center
de votre côtépourquoi de cette façon?? parce que BS a la méthodologie de
offset
mais il a un inconvénient, car il ne fonctionne que pour la même taille de colonne, de sorte que seule.col-X-2
,.col-X-4
,col-X-6
,col-X-8
etcol-X-10
sont pris en charge.Doit faire : assurez-vous juste que selon la div vous voulez du centre, a un div
width
mentionné.....col-center
va faire reposer de travailOriginalL'auteur NoobEditor
Pour centrer un élément de niveau bloc horizontalement dans le bootstrap utilisation
center-block
classe.Par exemple:
ne fonctionne pas (me
<div class="col-xs-12 col-md-6 center-block">
Avez-vous bootstrap 3.0.1 ou plus?
oui à l'aide 3.3.6, thouhgh
col-*-offset-*
fonctionne parfaitement, donc utilisé queOriginalL'auteur dipole_moment