कैसे सीएसएस में एक छवि पर पाठ स्थिति के लिए

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>

जब मैं पृष्ठभूमि-छवि का उपयोग करता हूं तो मुझे html2pdf से कोई आउटपुट नहीं मिलता है:

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

Comments

यह एक पृष्ठभूमि छवि के साथ बनाने के लिए possibl है?

— Webwoman

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>

Comments

आप z- इंडेक्स से बच सकते हैं

— FooBar

@danielad: जब तक आप उत्तर संपादित नहीं करते तब तक यह ठीक काम कर रहा था। मैंने आपके संपादन वापस कर दिए हैं।

— xbonez

हाहा-- शुक्रिया मैं आपको सिर्फ चीजों को ठीक करने के लिए याद दिलाता हूं - यह कल काम नहीं कर रहा था - हेलो द वर्ल्ड टेक्स्ट

— डैनियल एडेन्यू

आप छवि के बीच में पाठ कैसे प्राप्त कर सकते हैं? लेफ्ट 200, बॉटम 200?

— मेसन एच। हैटफील्ड

अफसोस की बात है कि यह वास्तव में एक बुरा विकल्प है यदि आप चाहते हैं कि आपकी साइट आधुनिक, उत्तरदायी प्रथाओं का पालन करें क्योंकि आप कंटेनर के आकार को ठीक कर रहे हैं (उत्तर 2012 से था, इसलिए यह समझ से बाहर है)। एक बेहतर समाधान यहाँ पाया जा सकता है: stackoverflow.com/questions/43333495/text-over-image-responsive

— Sk446

Answer 2

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

सेंटरिंग द अननोन के आधार पर

यहाँ काम कोडपेन उदाहरण

एचटीएमएल

<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;
}

Comments

यह समाधान उन समय के लिए बहुत अच्छा है जब आप एक सेट ऊँचाई या चौड़ाई निर्दिष्ट नहीं कर सकते।

— यजमान

Answer 3

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

Comments

क्या होगा अगर छवि को दस्तावेज़ का एक सिमेंटिक हिस्सा होने की आवश्यकता है?

— animuson

@ मानसून: मुझे नहीं लगता कि यहाँ ऐसा है। : \

— हैरी जोय

मैं इसमें से pdf जेनरेट करने के लिए html2pdf का उपयोग कर रहा हूं और अगर मैं बैकग्राउंड-इमेज का उपयोग करता हूं तो मुझे कुछ भी नहीं मिलता है।

— वर्न एचेता

@KyokaSuigetsu: तब आपको यह प्रश्न शीर्षक बदलना चाहिए कि आप HTML2pdf का उपयोग कर रहे हैं।

— हैरी जॉय

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;
}

HTML कोड:

<!-- 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>

आयोनिक ग्रिड लेआउट के लिए, समान रूप से ग्रिड तत्व और HTML के ऊपर उपयोग की जाने वाली कक्षाएं, कृपया देखें - ग्रिड: समान रूप से अंतर स्तंभ । आशा है कि यह आपकी मदद करता है ... :)

Answer 5

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

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

Comments

मैं उन लोगों से एक पीडीएफ बनाने के लिए html2pdf का उपयोग कर रहा हूं। यदि मैं एक पृष्ठभूमि-छवि का उपयोग करता हूं तो मुझे कोई छवि नहीं दिखाई देती है। कृपया मेरा संपादन देखें।

— वर्न एचेटा

मुझे क्षमा करें, मुझे पता नहीं है कि html2pdf क्या है।

— येवगेनी सिम्किन

Answer 6

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

यह कोड ऊपर कैलास के उत्तर के साथ शुरू हुआ

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

मेरा HTML

<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;
    }