Come centrare verticalmente l'allineamento dell'immagine di sfondo con il testo?

Question

Sto riscontrando problemi nell'allineamento verticale dell'immagine di sfondo con il testo, senza assegnare valori costanti (e quindi non automatici e riutilizzabili) a height o line-height. Mi chiedevo se esiste effettivamente un modo per centrare verticalmente l'allineamento dell'immagine bg di, ad esempio, altezza riga or altezza?

Una demo live è disponibile qui: http://cssdesk.com/8Jsx2.

Ecco il codice HTML:

<a class="">background-position: center</a> 
<a class="contain">background-size: contain</a> 
<a class="line-height">Constant line-height</a> 

Ed ecco il CSS:

a { 
    display: block; 
    margin: 10px; 
    width: 200px; 
    padding-left: 34px; 
    font-size: 14px; 

    background: url('http://cdn1.iconfinder.com/data/icons/freeapplication/png/24x24/Thumbs%20up.png'); 
    background-repeat: no-repeat; 
    background-position: 5px center; 

    border: 1px solid black; 
} 

/* I don't want to use constant line-height */ 
.line-height { 
    line-height: 24px; 
} 

/* I don't want to use this, because I want my bg image's size to stay intact */ 
.contain { 
    background-size: contain; 
} 

Answer 1

Usando il background CSS per center l'immagine di sfondo avrete sempre centrato. Il problema è l'allineamento del testo al centro del controllo.

Avete considerato l'utilizzo delle unità em per specificare l'altezza della linea? Dovrai specificare un qualche tipo di altezza per consentire che il centro verticale abbia luogo.

In alternativa, se non si desidera utilizzare em, è possibile provare display:table-cell css.

Check - http://cssdesk.com/3ZXrH - per i due esempi precedenti. Ho aggiunto height:10em; per dimostrare meglio cosa sta succedendo.

Answer 2

Non penso che questo sia possibile con il solo CSS perché le immagini di sfondo non influenzano l'altezza del loro elemento contenitore. Dovresti rilevare la dimensione dell'immagine di sfondo e ciò richiederebbe javascript. Rilevare la larghezza e l'altezza di un elemento in Javascript comporta la creazione di img dall'immagine di sfondo.

Ecco una soluzione che utilizza Javascript e display: table per ottenere il risultato desiderato:

esempio di lavoro: http://jsbin.com/olozu/9/edit

CSS:

div { 
    display: table; 
} 

a { 
    display: table-cell; 
    vertical-align: middle; 
    margin: 10px; 
    width: 200px; 
    padding-left: 34px; 
    font-size: 14px; 

    background: url('http://cdn1.iconfinder.com/data/icons/freeapplication/png/24x24/Thumbs%20up.png'); 
    background-repeat: no-repeat; 
    background-position: 0 0; 
    border: 1px solid black; 
} 

HTML:

<div>< 
    <a id="example-a">background-position: center</a> 
</div> 

JS :

$(function() { 

    var imageSrc = $('#example-a') 
       .css('background-image') 
        .replace('url(', '') 
         .replace(')', '') 
         .replace("'", '') 
         .replace('"', ''); 

    var image = '<img style="display: none;" src="' + imageSrc + ' />'; 

    $('div').append(image); 

    var width = $('img').width(), 
     height = $('img').height(); 

    // Set the height of the containing div to the height of the background image 
    $('#example-a').height(height); 

}); 

Ho basato la mia risposta sul seguente origine How do I get background image size in jQuery?

Answer 3

Provare a utilizzare due parole per allineare lo sfondo con i CSS.

background-position: left center; 

Riferimento: http://www.w3schools.com/cssref/pr_background-position.asp