सीएसएस

Question

में किसी छवि पर टेक्स्ट को कैसे स्थानांतरित करें सीएसएस में किसी छवि पर टेक्स्ट को कैसे केंद्रित किया जाए?

<div class="image"> 
    <img src="sample.png"/> 
    <div class="text"> 
     <h2>Some text</h2> 
    </div> 
</div> 

मैं नीचे एक की तरह कुछ करना चाहता हूँ, लेकिन मैं कोई परेशानी मह्सूस कर रहा हूँ, यहाँ मेरे वर्तमान सीएसएस है

<style> 
.image { 
    position: relative; 
} 

h2 { 
    position: absolute; 
    top: 200px; 
    left: 0; 
    width: 100%; 
    margin: 0 auto; 
    width: 300px; 
    height: 50px; 
} 
</style> 

मैं पृष्ठभूमि छवि का उपयोग करते हैं मैं किसी भी नहीं मिलता है एचटीएमएल 2 पीडीएफ से आउटपुट:

<style> 
#image_container{ 
    width: 1000px; 
    height: 700px; 
    background-image:url('switch.png'); 
} 
</style> 
<a href="prints.php">Print</a> 
<?php ob_start(); ?> 
<div id="image_container"></div> 
<?php 
$_SESSION['sess'] = ob_get_contents(); 
ob_flush(); 
?> 

यहां प्रिंट्स हैं। php:

<?php require_once('html2pdf/html2pdf.class.php'); ?> 
<?php 
$html2pdf = new HTML2PDF('L', 'A4', 'en'); 
$html2pdf->writeHTML($_SESSION['sess']); 
$html2pdf->Output('random.pdf'); 
?> 

Answer 1

कुछ इस तरह के बारे में कैसे: http://jsfiddle.net/EgLKV/3/

इसके position:absolute और z-index का उपयोग कर छवि पर टेक्स्ट रखने के द्वारा किया।

#container { 
 
    height: 400px; 
 
    width: 400px; 
 
    position: relative; 
 
} 
 
#image { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
} 
 
#text { 
 
    z-index: 100; 
 
    position: absolute; 
 
    color: white; 
 
    font-size: 24px; 
 
    font-weight: bold; 
 
    left: 150px; 
 
    top: 350px; 
 
}

<div id="container"> 
 
    <img id="image" src="http://www.noao.edu/image_gallery/images/d4/androa.jpg" /> 
 
    <p id="text"> 
 
    Hello World! 
 
    </p> 
 
</div>

Answer 2

sample.pngtext या h2 सीएसएस वर्ग की पृष्ठभूमि छवि के रूप क्यों सेट नहीं? यह एक प्रभाव पर लिखा होगा जैसा कि आपने एक छवि पर लिखा है।

Answer 3

हैरी जॉय बताते हैं, छवि को div की पृष्ठभूमि के रूप में सेट करें और फिर, यदि आपके पास केवल एक पंक्ति है, तो आप पाठ की रेखा-ऊंचाई को div ऊंचाई के समान ही सेट कर सकते हैं और यह जगह होगी div के केंद्र में आपका पाठ।

यदि आपके पास एक से अधिक पंक्तियां हैं तो आप डिस्प्ले को टेबल-सेल और लंबवत-संरेखण के बीच मध्य में सेट करना चाहते हैं।

Answer 4

यह एक कंटेनर एक रिश्तेदार लेआउट और सामग्री (कंटेनर में रखा) के रूप में निश्चित लेआउट होने का उपयोग करने के लिए अच्छा है एक संवेदनशील डिजाइन के लिए।

सीएसएस शैलियाँ:

/*Centering element in a base container*/ 

.contianer-relative{ 
    position: relative; 
} 

.content-center-text-absolute{ 
    position: absolute; 
    text-align: center; 
    width: 100%; 
    height: 0%; 
    margin: auto; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    z-index: 51; 
} 

एचटीएमएल कोड:

<!-- Have used ionic classes --> 
<div class="row"> 
    <div class="col remove-padding contianer-relative"><!-- container with position relative --> 
     <div class="item item-image clear-border" ><a href="#"><img ng-src="img/engg-manl.png" alt="ENGINEERING MANUAL" title="ENGINEERING MANUAL" ></a></div> <!-- Image intended to work as a background --> 
     <h4 class="content-center-text-absolute white-text"><strong>ENGINEERING <br> MANUALS</strong></h4><!-- content div with position fixed --> 
    </div> 
    <div class="col remove-padding contianer-relative"><!-- container with position relative --> 
     <div class="item item-image clear-border"><a href="#"><img ng-src="img/contract-directory.png" alt="CONTRACTOR DIRECTORY" title="CONTRACTOR DIRECTORY"></a></div><!-- Image intended to work as a background --> 
     <h4 class="content-center-text-absolute white-text"><strong>CONTRACTOR <br> DIRECTORY</strong></h4><!-- content div with position fixed --> 
    </div>  
</div> 

IONIC ग्रिड लेआउट, समान रूप से ग्रिड तत्वों और इसके बाद के संस्करण HTML में इस्तेमाल के लिए, कृपया उल्लेख वर्गों के लिए - Grid: Evenly Spaced Columns। उम्मीद है कि यह आपकी मदद करता है ... :)

Answer 5

उत्तरदायी आकारों के साथ काम करने के लिए यह एक और तरीका है। यह आपके पाठ को केंद्रित रखेगा और अपने माता-पिता के भीतर अपनी स्थिति बनाए रखेगा। यदि आप इसे केंद्रित नहीं करना चाहते हैं तो यह भी आसान है, बस absolute पैरामीटर के साथ काम करें। ध्यान रखें कि मुख्य कंटेनर display: inline-block का उपयोग कर रहा है। आप जो काम कर रहे हैं उसके आधार पर ऐसा करने के कई अन्य तरीके हैं।

के आधार पर Centering the Unknown

Working codepen example here

एचटीएमएल

<div class="containerBox"> 
    <div class="text-box"> 
     <h4>Your Text is responsive and centered</h4> 
    </div> 
    <img class="img-responsive" src="http://placehold.it/900x100"/> 
</div> 

सीएसएस

.containerBox { 
    position: relative; 
    display: inline-block; 
} 
.text-box { 
    position: absolute;  
    height: 100%; 
    text-align: center;  
    width: 100%; 
} 
.text-box:before { 
    content: ''; 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle; 
} 
h4 { 
    display: inline-block; 
    font-size: 20px; /*or whatever you want*/ 
    color: #FFF; 
} 
img { 
    display: block; 
    max-width: 100%; 
    height: auto; 
} 

Answer 6

2017 के रूप में

यह अधिक उत्तरदायी है और मेरे लिए काम किया है। यह बैज की तरह बनाम बनाम टेक्स्ट को डालने के लिए है। संख्या 8 के बजाय , मेरे पास डेटाबेस से डेटा खींचने के लिए एक चर था।

इस कोड Kailas के साथ शुरू की ऊपर

https://jsfiddle.net/jim54729/memmu2wb/3/

मेरे एचटीएमएल

<div class="containerBox"> 
    <img class="img-responsive" src="https://s20.postimg.org/huun8e6fh/Gold_Ring.png"> 
    <div class='text-box'> 
    <p class='dataNumber'> 8 </p> 
    </div> 
</div> 

और मेरे सीएसएस अप का जवाब:

.containerBox { 
    position: relative; 
    display: inline-block; 
} 

.text-box { 
    position: absolute; 
    height: 30%; 
    text-align: center; 
    width: 100%; 
    margin: auto; 
    top: 0; 
    bottom: 0; 
    right: 0; 
    left: 0; 
    font-size: 30px; 
} 

.img-responsive { 
    display: block; 
    max-width: 100%; 
    height: 120px; 
    margin: auto; 
    padding: auto; 
} 

.dataNumber { 
    margin-top: auto; 
} 

Answer 7

करने का एक छोटा सा और शॉर्ट रास्ता वही

एचटीएमएल

<div class="image"> 
    <p> 
     <h3>Heading 3</h3> 
     <h5>Heading 5</h5> 
    </p> 
</div> 

सीएसएस

.image { 
     position: relative; 
     margin-bottom: 20px; 
     width: 100%; 
     height: 300px; 
     color: white; 
     background: url('../../Images/myImg.jpg') no-repeat; 
     background-size: 250px 250px; 
    }