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

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.

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

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.

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;
}

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.

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/

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

i.fa {
    vertical-align: middle;
}

Questo ha funzionato bene per me.

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

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

Per chi utilizza Bootstrap 4 è semplice:

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

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
}

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;
}

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.

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

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

div .icon {
   vertical-align: middle;
}