Allineamento verticale di SVG nei CSS

Question

Ho un problema con l'allineamento SVG in linea. Ho creato un pulsante con testo e SVG. E mentre l'allineamento funziona correttamente quando SVG è grande almeno quanto il testo fallisce quando l'altezza SVG è più piccola del testo.

Ho creato un test case con un pulsante di sfondo bicolore per indicare esattamente dove si trova il centro. Puoi vedere se guardi più da vicino che il secondo caso non è perfettamente allineato perché l'altezza dell'SVG è inferiore a quella del testo.

C'è un modo per risolvere questo problema? Farlo in un altro modo (no js per favore)?

caso

prova: https://goo.gl/KYDKGH

Answer 1

fiddle 1 - È possibile utilizzare position:relative sul contenitore e position:absolute sugli oggetti come questo:

position: absolute; 
    top: 50%; 
    -webkit-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
    transform: translateY(-50%); 
    left: 0; 
    right: 0; 
    margin: auto; 
    text-align: center; 

I top: 50% sposta l'oggetto al centro verticale del contenitore raccolta cima l'oggetto come riferimento (non il suo centro), quindi lo transform: translateY sposta una distanza del 50% della sua dimensione verso l'alto per lasciarlo esattamente al centro del contenitore (dal centro degli oggetti).

ps: il text-align:center;left:0;right:0; e margin:auto sono per allineamento orizzontale.

fiddle 2 - O utilizzare display:flex sul contenitore con align-items per eseguire l'allineamento verticale del contenuto così:

display: -webkit-flex; /* Safari */ 
    display: flex; 
    -webkit-align-items: center; /* Safari 7.0+ */ 
    align-items: center; 
    -webkit-justify-content: center; 
    justify-content: center; 

ps: il justify content è per allineamento orizzontale.