Comment aligner verticalement au milieu d'un bouton dans une div dynamique
j'aimerais centrer un bouton aligné verticalement dans un div en utilisant bootstrap
<div class="row" >
<div class="col-xs-2">
<button class="btn" style="color: #660066;">
<i class="fa fa-arrow-left" data-ng-click="onClickBack()" ></i>
</button>
</div>
<div class="col-xs-10">
<h4> {{rootNode.nodeName}}</h4>
</div>
</div>
Comme vous le voyez, j'ai deux colonnes,l'une contenant un bouton dans la gauche, l'autre contenant l'Étiquette. Lors de l'étiquette.la longueur est augmentée alors le div changera la hauteur - > je veux que le bouton soit toujours centré dans le div.
3 réponses
Vous pouvez utiliser display:inline-block et vertical-align:middle:
.col-xs-2, .col-xs-10 {
display: inline-block;
float: none;
}
.col-xs-10 {
vertical-align: middle;
}
Voici un démonstration de violon.
Bien que vous devrez assurez-vous de supprimer l'espace blanc entre la colonne <div>s dans votre balisage. Reportez-vous à cette réponse pour plus d'informations sur que.
j'ai utilisé ce. Vérifiez la "propriété style". Que va faire l'affaire.
style='position: absolute;top: 50%;left: 50%;margin-right: -50%;transform: translate(-50%, -50%)'>
<span class='glyphicon glyphicon-refresh spinning'>
</span> Loading...</button>
Le problème est que le rembourrage sur le H4 est plus que le bouton. Vous pouvez envelopper le bouton à l'intérieur du H4 (peut-être pas la meilleure pratique), ou changer le rembourrage de bouton dans votre CSS..
<div class="row">
<div class="col-xs-2">
<h4>
<button class="btn" style="color: #660066;">
<i class="fa fa-arrow-left" data-ng-click="onClickBack()"></i>
</button>
</h4>
</div>
<div class="col-xs-10">
<h4> {{rootNode.nodeName}}</h4>
</div>
</div>
OU, laissez le bouton comme il est, et appliquer le style CSS à l' H4..
h4 {
margin-top: -0.5em;
}