Comment faire pour centrer aligner ion icône de l'intérieur de bouton?
J'ai cette structure html:
<ion-view view-title="Items">
<ion-content>
<div class="card">
<a href="#/app/item1" class="item item-text-wrap item-button-left">
<button class="button circle text-center">
<i class="ion-crop"></i>
</button>
Item 1
</a>
</div>
<div class="card">
<a href="#/app/item2" class="item item-text-wrap item-button-left">
<button class="button circle text-center">
<i class="ion-social-buffer"></i>
</button>
Item 2
</a>
</div>
</ion-content>
</ion-view>
Et j'ai ajouté cette css personnalisé:
.circle {
background-color: #00f;
border-radius: 100%;
border: 1px solid #00f;
width: 50px!important;
height: 50px;
color: #fff;
}
.circle i {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
Mais il s'affiche de cette façon:
Comment puis-je faire la cards
de prendre de la hauteur et la ion-icons
pour le bouton du centre?
Merci pour votre temps.
Pour un, vous pouvez définir
essayez d'ajouter
Il ne fonctionne pas.. je pense ionique utilise une valeur par défaut
Il a travaillé dans
Notez bien que cette solution ne fonctionne pas dans Internet Explorer si vous ne définissez pas l'icône de hauteur.
line-height
de .circle
à 50px
.essayez d'ajouter
position: relative;
à la .circle
Il ne fonctionne pas.. je pense ionique utilise une valeur par défaut
flex
style à la carte. Je ne sais pas comment le contourner.Il a travaillé dans
.circle i
, maintenant l'icône est le centre alignés, merci 🙂Notez bien que cette solution ne fonctionne pas dans Internet Explorer si vous ne définissez pas l'icône de hauteur.
OriginalL'auteur | 2015-11-09
Vous devez vous connecter pour publier un commentaire.
Vous pouvez soit définir
text-align
àcenter
etline-height
à50%
ou essayez ceci:Violon: http://jsfiddle.net/41eo0he7/
card
encore à la hauteur du problème.Peut-être vous devriez modifier le
card
code (height
etc).Ouais.. je pense que c'est le moyen le plus évident.. merci
OriginalL'auteur Tomek Buszewski