Come centrare il testo verticalmente con una grande icona di carattere impressionante?


231

Diciamo che ho un pulsante bootstrap con un'icona fantastica per i caratteri e del testo:

<div>
    <i class='icon icon-2x icon-camera'></i>
    hello world
</div>

Come faccio a far apparire il testo centrato verticalmente? Il testo è allineato con il bordo inferiore dell'icona ora: http://jsfiddle.net/V7DLm/1/

EDIT: ho una possibile soluzione : http://jsfiddle.net/CLdeG/1/ ma mi sento un po 'confuso - introduce tag p extra, usa pull-left e display: table. Forse qualcuno può suggerire un modo più semplice.


2
Sei un dio Seriamente, ho trascorso 2 ore su questo oggi, la tua soluzione è stata di gran lunga la più pulita. Non è necessario codificare nulla.
Chuck,

questo approccio è più semplice
Raveen Beemsingh,

Risposte:


304

Ho dovuto farlo da solo, devi farlo al contrario.

  • non giocare con l'allineamento verticale del testo
  • gioca con l'allineamento verticale dell'icona font-awesome
<div>
  <span class="icon icon-2x icon-camera" style=" vertical-align: middle;"></span>
  <span class="my-text">hello world</span>
</div>

Ovviamente non puoi usare gli stili inline e indirizzarli con la tua classe css. Ma questo funziona in modo copia-incolla.

Vedere qui: Allineamento verticale di testo e icona nel pulsante

Se dipendesse da me, tuttavia, non userei l'icona-2x. E specifica semplicemente la dimensione del carattere, come nel seguito

<div class='my-fancy-container'>
    <span class='my-icon icon-file-text'></span>
    <span class='my-text'>Hello World</span>
</div>
.my-icon {
    vertical-align: middle;
    font-size: 40px;
}

.my-text {
    font-family: "Courier-new";
}

.my-fancy-container {
    border: 1px solid #ccc;
    border-radius: 6px;
    display: inline-block;
    margin: 60px;
    padding: 10px;
}

per un esempio funzionante, vedere JsFiddle


1
sì, questa è una soluzione migliore, grazie. Sembra ancora richiedere l'altezza della linea anche se jsfiddle.net/paulftw/F3KyK/41
Paul

1
Ho aggiornato il tuo jsfiddle per come lo farei. Ho usato la dimensione del carattere per l'icona invece di usare il 2x. jsfiddle.net/3GMjp/1
andxyz

Nel tuo primo pezzo di codice il tag iniziale <span> non corrisponde al tag finale </i>.
jzacharuk,

Non funziona con alcune icone. Esempio fa-angle-left
steakchaser

importante rendersi conto che l'inclusione dei file js fontawesome può anche modificare l'aspetto. La mia icona era troppo in alto, ho cancellato l'inclusione js per vedere cosa sarebbe successo e ora è troppo in basso -.-
lucidbrot

53

Uso le icone accanto al testo il 99% delle volte, quindi ho apportato la modifica a livello globale:

.fa-2x {
  vertical-align: middle;
}

Aggiungi 3x, 4x, ecc alla stessa definizione necessaria.


7
A mio avviso, questa dovrebbe essere la risposta accettata, in quanto è di gran lunga la soluzione più semplice, a meno che non mi manchi qualcosa nella domanda originale. Grazie @rushonerok! Non sono sicuro del motivo per cui alcune persone dicono di non usare vertical-align: middle;- Potrei mancare qualcosa qui. Per favore, spiega se è così.
Kendall,

1
@Kendall Roth Penso che quando le persone dicono di non usare vertical-align: middle, significano se stai usando degli blockelementi . Se stai usando inline, inline-blocko table-cell, dovresti essere bravo. MDN:vertical-align
rinogo,

Funziona come il fascino! Grazie: D
Mohammed A. Fadil,

37

Dopo aver considerato tutte le opzioni suggerite, la soluzione più pulita sembra impostare l'altezza della linea e allineare verticalmente tutto:

Vedi la demo di Jsfiddle

CSS:

div {
    border: 1px solid #ccc;
    display: inline-block;
    height: 50px;
    margin: 60px;
    padding: 10px;
}
#text, #ico {
    line-height: 50px;
}

#ico {
    vertical-align: middle;
}

2
Cosa succede se il contenitore è più grande di 50 px? Quindi non funzionerà ... Ho contenuti che cambiano dimensione e dovrebbe avere un'icona centrata all'interno ... qualche idea al riguardo?
Slaven Tomac

24

se le cose non si allineano, una semplice line-height: inherit;via CSS su specifici elementi i.fa che hanno problemi di allineamento potrebbe fare il trucco semplicemente.

È anche possibile utilizzare una soluzione globale, che a causa di una specificità CSS leggermente superiore sovrascriverà la regola .fa di FontAwesome che specifica line-height: 1senza richiedere !importantsulla proprietà:

i.fa {
  line-height: inherit;
}

Assicurati solo che la soluzione globale di cui sopra non causi altri problemi in luoghi in cui potresti anche utilizzare le icone FontAwesome.


16

un'opzione flexbox - carattere fantastico 4.7 e precedenti

URL ospitato FA 4.x - https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

div {
  display: inline-flex; /* make element size relative to content */
  align-items: center; /* vertical alignment of items */
  line-height: 40px; /* vertically size by height, line-height or padding */
  padding: 0px 10px; /* horizontal with padding-l/r */
  border: 1px solid #ccc;
}

/* unnecessary styling below, ignore */
body {display: flex;justify-content: center;align-items: center;height: 100vh;}div i {margin-right: 10px;}div {background-color: hsla(0, 0%, 87%, 0.5);}div:hover {background-color: hsla(34, 100%, 52%, 0.5);cursor: pointer;}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div>
    <i class='fa fa-2x fa-camera'></i>
    hello world
</div>

violino

http://jsfiddle.net/Hastig/V7DLm/180/


usando flex e font fantastico 5

URL ospitato da FA 5.x - https://use.fontawesome.com/releases/v5.0.8/js/all.js

div {
  display: inline-flex; /* make element size relative to content */
  align-items: center; /* vertical alignment of items */
  padding: 3px 10px; /* horizontal vertical position with padding */
  border: 1px solid #ccc;
}
.svg-inline--fa { /* target all FA icons */
  padding-right: 10px;
}
.icon-camera .svg-inline--fa { /* target specific icon */
  font-size: 50px;
}
/* unnecessary styling below, ignore */
body {display: flex;justify-content: center;align-items: center;height: 100vh; flex-direction: column;}div{margin: 10px 0;}div {background-color: hsla(0, 0%, 87%, 0.5);}div:hover {background-color: hsla(212, 100%, 63%, 1);cursor: pointer;}
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<div class="icon-camera">
    <i class='fas fa-camera'></i>
    hello world
</div>
<div class="icon-clock">
    <i class='fas fa-clock'></i>
    hello world
</div>

violino

https://jsfiddle.net/3bpjvof2/


1
Questo può centrare un'icona verticalmente all'interno di un div, non solo all'interno di una riga di testo. Funziona alla grande!
Sean the Bean,

@ chiunque continua a provare a modificarlo - questo è generalmente il mio stile di layout per le risposte. Credo che lo renda più leggibile / comprensibile e permetta alle persone di sapere meglio dove stanno andando prima di fare clic sul collegamento. Nel caso dell'URL ospitato da FA, alcune persone hanno l'abitudine di evidenziare un link per copiarlo, ecco perché è scritto per intero. I collegamenti jsfiddle hanno un'intestazione per spezzare meglio la pagina, altrimenti è più facile perdere e le risposte possono apparire ingombra.
Hastig Zusammenstellen,

11

Il modo più semplice è impostare la proprietà CSS di allineamento verticale al centro

i.fa {
    vertical-align: middle;
}

3
.svg-inline--faper FontAwesome 5
darylknight il

@darylknight, cosa significa? Come lo attivare / utilizzare? Aggiungi qualcosa dopo il mio fa-clockin classe?
Prof. Falken,

5

Questo ha funzionato bene per me.

i.fa {
  line-height: 100%;
}

3

Prova a impostare l'icona come height: 100%

Non è necessario fare nulla con il wrapper (ad esempio il pulsante).

Ciò richiede Font Awesome 5. Non sono sicuro che funzioni con versioni FA precedenti.

.wrap svg {
    height: 100%;
}

Si noti che l'icona è in realtà un svgelemento grafico.

dimostrazione


2

Per chi utilizza Bootstrap 4 è semplice:

<span class="align-middle"><i class="fas fa-camera"></i></span>

Questo non ha senso come vertical-align: middle che viene applicato da questa classe è indirizzato solo alle tabelle.
Lucas Manzke,

1

Un'altra opzione per ottimizzare l'altezza della linea di un'icona è utilizzando una percentuale della vertical-alignproprietà. Di solito, lo 0% è in fondo e il 100% in alto, ma si potrebbero usare valori negativi o più di cento per creare effetti interessanti.

.my-element i.fa {
    vertical-align: 100%; // top
    vertical-align: 50%; // middle
    vertical-align: 0%; // bottom
}

1

Vorrei racchiudere il testo in modo da poterlo scegliere come target separatamente. Ora se si galleggia sia a sinistra che a sinistra, è possibile utilizzare l'altezza della linea per controllare la spaziatura verticale di. Impostandolo alla stessa altezza di (30px), verrà allineato al centro. Vedi qui .

Nuovo markup:

 <div>
    <i class='icon icon-2x icon-camera'></i>
    <span id="text">hello world</span>
</div>

Nuovo CSS:

div {
    border: 1px solid #ccc;
    height: 30px;
    margin: 60px;
    padding: 4px;
    vertical-align: middle;
}
i{
    float: left;
}
#text{
    line-height: 30px;
    float: left;
}

4
L'allineamento verticale non fa nulla sugli elementi a blocchi, funziona solo sugli elementi in linea o sulle celle di tabella.
cimmanon,

Vedo, impostare line-height = altezza del contenitore e cose fluttuanti rimaste funziona e necessita di meno battitura. Ecco un violino aggiornato con rumore ridotto: jsfiddle.net/F3KyK/7
Paul

È meglio impostare semplicemente vertical-align: middlel'icona e il testo. In questo modo non stai facendo ipotesi sull'altezza dell'icona e c'è meno CSS.
Maros,

0

Quando si utilizza una flexbox, l'allineamento verticale delle icone fantastiche dei caratteri accanto al testo può essere molto difficile. Ho provato margini e imbottitura, ma questo ha spostato tutti gli elementi. Ho provato diversi allineamenti flex come center, start, baseline, ecc. Senza alcun risultato. Il modo più semplice e pulito per regolare solo l'icona era di impostare il relativo div su position: relative; top: XX;Questo ha fatto perfettamente il lavoro.


0

Bene, questa domanda è stata posta anni fa. Penso che la tecnologia sia cambiata un po 'e che la compatibilità del browser sia molto migliore. Si potrebbe usare l'allineamento verticale, ma considererei alcuni meno scalabili e meno riutilizzabili. Consiglierei un approccio flexbox .

Ecco lo stesso esempio del poster originale usato ma con flexbox. Disegna un singolo elemento. Se la dimensione di un pulsante cambia per qualsiasi motivo, continuerà a essere centrata verticalmente e orizzontalmente.

.button {
    border: 1px solid #ccc;
    height: 40px;
    margin: 60px;
    padding: 4px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

Esempio: JsFiddle


0

Basta definire la vertical-alignproprietà per l'elemento icon:

div .icon {
   vertical-align: middle;
}
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.