पाठ के साथ पृष्ठभूमि छवि को संरेखित करने के लिए लंबवत केंद्र कैसे करें?

Question

मुझे height या line-height पर स्थिर (और इसलिए, स्वत: और पुन: प्रयोज्य नहीं) मान निर्दिष्ट किए बिना पाठ के साथ पृष्ठभूमि छवि को लंबवत रूप से संरेखित करने में समस्या हो रही है। मैं सोच रहा था कि वास्तव में बीजी छवि को संरेखित करने के लिए लंबवत केंद्र का तरीका है, कहें और a तत्व , with its text without assigning constant values to लाइन-ऊंचाई or ऊंचाई`?

एक लाइव डेमो यहां उपलब्ध है: http://cssdesk.com/8Jsx2।

यहाँ एचटीएमएल है:

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

और यहाँ सीएसएस है:

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

पृष्ठभूमि छवि आप यह हमेशा केंद्रित होगा center करने के लिए background सीएसएस का उपयोग करके। मुद्दा नियंत्रण के बीच में पाठ का संरेखण है।

क्या आपने लाइन ऊंचाई निर्दिष्ट करने के लिए em इकाइयों का उपयोग करने पर विचार किया है? ऊर्ध्वाधर केंद्र को होने की अनुमति देने के लिए आपको किसी प्रकार की ऊंचाई निर्दिष्ट करने की आवश्यकता होगी।

वैकल्पिक रूप से, यदि आप em का उपयोग नहीं करना चाहते हैं, तो आप display:table-cell सीएसएस का प्रयास कर सकते हैं।

उपरोक्त दो उदाहरणों के लिए - http://cssdesk.com/3ZXrH - चेक करें। बेहतर प्रदर्शन करने के लिए मैंने height:10em; जोड़ा है।

Answer 2

मुझे नहीं लगता कि यह अकेले सीएसएस के साथ संभव है क्योंकि पृष्ठभूमि छवियां उनके युक्त तत्व की ऊंचाई को प्रभावित नहीं करती हैं। आपको पृष्ठभूमि छवि के आकार का पता लगाने की आवश्यकता होगी और इसके लिए जावास्क्रिप्ट की आवश्यकता होगी। जावास्क्रिप्ट में किसी तत्व की चौड़ाई और ऊंचाई का पता लगाने में पृष्ठभूमि छवि से img बनाना शामिल है।

कार्य उदाहरण: http://jsbin.com/olozu/9/edit

सीएसएस:

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> 

जे एस

यहाँ एक समाधान जावास्क्रिप्ट और display: table का उपयोग करता है वांछित परिणाम प्राप्त करने के लिए है :

$(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); 

}); 

मैं निम्नलिखित स्रोत How do I get background image size in jQuery?

Answer 3

दो शब्दों का उपयोग कर सीएसएस के साथ अपनी पृष्ठभूमि संरेखित करने के लिए प्रयास करें पर मेरा उत्तर आधारित।

background-position: left center; 

संदर्भ: http://www.w3schools.com/cssref/pr_background-position.asp

की