Io uso Google Chrome Inspector e se selezioni lo pseudo prima del glyphicon vedrai che c'è uno spazio vuoto a destra. Come posso centrare il glyphicon?Contenuto glyphicon centrale
Ho provato a impostare l'allineamento del testo ma non funziona.
<span class="glyphicon glyphicon-plus"></span>
<style>.glyphicon { font-size: 120px; }</style>
collegamento aggiornato jsFiddle 2
ho dato letter spacing per pseudo elemento di un d ha fatto il trucco. Ho provato a cambiare il font-size e vedo che lo spazio bianco non viene visualizzato.
.glyphicon:before{
letter-spacing: -0.085em;
}
violino di lavoro: http://jsfiddle.net/MasoomS/1z79r22y/
questa è la risposta migliore di gran lunga .. Io accetterò, ma aspetterò un'altra pochi giorni per dare la taglia – Almis
Basta aggiungere la classe my-style-icon all'icona e aggiungere questo alla tua CSS:
.my-style-icon {
font-size: 120px;
display: block;
text-align:center;
}
Lo span è al centro ma lo pseudo prima non lo è (dovrei menzionarlo nella domanda) – Almis
Inserisci il codice completo, tutto quello che vedo nel jsfiddle è l'icona html e qualche css inutile. – Wazaaaap
Non ho fatto molto volevo solo centrare glyphicon in una scatola ma a causa di quello pseudo prima non sembra che sia nel mezzo. Posso usare padding o margin per risolvere il problema, ma penso che potrebbe esserci una soluzione migliore. Controlla il link aggiornato – Almis
vertical-align: middle; margin: 0 auto; dovrebbe fare il trucco per te.
non funziona, puoi aggiornare il mio jsfiddle? forse sto facendo qualcosa di sbagliato. – Almis
Almis Ciao. Il tuo codice demo utilizza solo solo il span con il glyphicon non ha larghezza al centro all'interno.
Non appena fai qualcosa di simile, sarà centrato.
<div class="text-center">
<span class="glyphicon glyphicon-plus"></span>
</div>
<br>
<span class="glyphicon glyphicon-plus col-xs-12 text-center"></span>
Ecco un Fiddle.
Ciao, il tuo esempio è esattamente lo stesso del mio, se prendi un righello vedrai che l'asse y è esattamente lo stesso. Controlla il jsfiddle aggiornato per vedere cosa intendo – Almis
Ciao, scusa non ho capito bene la prima volta. Re ha guardato il tuo nuovo violino e posso vedere cosa intendi ora. Dai un'occhiata a questo [** FIDDLE **] (http://jsfiddle.net/AngularJR/sps01dsd/3/). C'è anche una differenza tra l'icona più e l'icona meno.La ** ** meno sembra avere spazio la sinistra e la ** ** più icona ha lo spazio a destra come lei ha sottolineato. – AngularJR
sì lo so, se non siamo in grado di fare nulla, allora l'autore di questo glyphicons dovrebbe risolvere il problema – Almis
Ciao Almis.
.glyphicon {
font-size: 120px;
display: block;
text-align: center;
}
Basta sostituire la classe .glyphicon con il codice css sopra.
Godetevi ..
Come si può vedere la sua chiaramente un problema dall'autore l'aggiunta di qualche spazio bianco, l'unico motivo per cui per risolvere questo problema è impostando manualmente la larghezza.
Si può sbarazzarsi dello spazio vuoto sulla destra del glifo giocando con l'attributo letter-spacing:
.glyphicon {
font-size: 120px;
letter-spacing: -9px;
}
Credo che il problema principale qui è con gli SVG che il font icona fu costruito da. Ho già creato font di icone da SVG e ho visto esattamente questo stesso comportamento. Se il simbolo non era centrato all'interno del suo SVG viewbox, otterresti un glifo che era fuori centro come hai osservato.
Lo sviluppo di una soluzione basata su codice sarebbe estremamente disordinato, perché dovresti tenere conto individualmente per ogni glifo che non è centrato, e quindi i tuoi offset dovrebbero essere relativi alla dimensione dell'icona, quindi le compensazioni scala con lo font-size dell'icona. È certamente fattibile, ma sembra il tipo di cosa che sarebbe un mal di testa da mantenere.
mi sento di raccomandare uno dei seguenti modi:
Io di solito uso max-width (e larghezza, se voglio tutte le icone in un elenco di avere le stesse dimensioni) per affrontare tali questioni.
Secondo il vostro jsFiddle:
max-width:222px;
Vedi here.
La ragione per cui questo non può essere risolto diversamente da un attacco è perché il glyphicon stesso non è centrato all'interno del proprio contenitore, il che significa che quando è stato progettato nella sua matrice non era completamente centrato.
Sarà necessario "modificarlo" con i valori indicati sopra (spaziatura delle lettere, margine negativo, ecc.) Ma dipende dalla risoluzione.
Tuttavia, per centrare verticalmente che è possibile rimuovere l'imbottitura, e l'utilizzo line-height uguale all'altezza del vostro contenitore
Usa font-impressionante, è '+' è perfettamente centrato, senza problemi di crenatura. E usa display: flex su genitore, in combinazione con margin: auto su child (es. Icon). Risulta in un perfetto allineamento. Ecco la jsfiddle (http://jsfiddle.net/Rpad/sps01dsd/13/)
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
HTML:
<div class="container">
<div class="row">
<div id="add" class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
<i class="fa fa-plus"></i>
</div>
</div>
</div>
CSS:
.fa-plus {
margin: auto;
font-size: 10em;
}
#add {
border: 5px dashed black;
border-radius: 25px;
display: flex;
}
Aggiornato collegamento http://jsfiddle.net/sps01dsd/1/ – Almis
Potrebbe essere un problema crenatura all'interno del file di carattere glyphicons, se si cerca un singolo caratteri az in un elemento in linea si vedrà che sono allineati al centro corretto. – Luizgrs
@Luizgrs hai ragione, credo che molti di loro siano corretti ma altri no, se provi il glyphicon-meno è ancora peggio. Penso che l'unico modo sia quello di aggiustare manualmente. Aspetterò una soluzione migliore. – Almis