Wie kann man Hintergrundbild vertikal mit Text zentrieren?

Question

Ich habe Probleme beim vertikalen Ausrichten des Hintergrundbildes mit Text, ohne konstante (und daher nicht automatische und wiederverwendbare) Werte an height oder line-height zu vergeben. Ich frage mich, ob es tatsächlich einen Weg gibt, um das Bild von, sagen wir, und a Element , with its text without assigning constant values to line-height or Höhe vertikal zu zentrieren?

Eine Live-Demo ist hier verfügbar: http://cssdesk.com/8Jsx2.

Hier ist der HTML:

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

Und hier ist der 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

die background CSS center das Hintergrundbild Durch die Verwendung Sie es immer zentriert haben werden. Das Problem ist die Ausrichtung des Textes auf die Mitte des Steuerelements.

Haben Sie darüber nachgedacht, die Einheiten em zur Angabe der Zeilenhöhe zu verwenden? Sie müssen eine bestimmte Höhe angeben, damit das vertikale Zentrum stattfinden kann.

Wenn Sie alternativ em nicht verwenden möchten, können Sie display:table-cell css versuchen.

Prüfen - http://cssdesk.com/3ZXrH - für die beiden obigen Beispiele. Ich habe height:10em; hinzugefügt, um besser zu demonstrieren, was vor sich geht.

Answer 2

Ich glaube nicht, dass dies mit CSS alleine möglich ist, da Hintergrundbilder die Höhe ihres enthaltenden Elements nicht beeinflussen. Sie müssten die Größe des Hintergrundbilds erkennen, und dazu wäre JavaScript erforderlich. Das Erkennen der Breite und Höhe eines Elements in Javascript beinhaltet das Erstellen eines img aus dem Hintergrundbild.

Hier ist eine Lösung, die Javascript und display: table verwendet das gewünschte Ergebnis zu erzielen:

Arbeitsbeispiel: 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); 

}); 

ich anhand meiner Antwort auf die folgende Quelle How do I get background image size in jQuery?

Answer 3

Versuchen zwei Wörter mit Ihrem Hintergrund mit CSS auszurichten.

background-position: left center; 

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