Metin css'de bir resmin üzerine nasıl yerleştirilir

Bir metni css'deki bir resmin üzerine nasıl ortalayabilirim?

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

Aşağıdakine benzer bir şey yapmak istiyorum ama zorluklar yaşıyorum, işte şu anki css'im

<style>
.image {
   position: relative;
}

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

Arka plan görüntüsünü kullandığımda html2pdf'den herhangi bir çıktı alamıyorum:

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

Baskılar.php burada:

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

Bunun gibi bir şeye ne dersiniz: http://jsfiddle.net/EgLKV/3/

Metni görüntünün üzerine yerleştirmek için position:absoluteve kullanılarak yapılır 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>

Bu, Duyarlı boyutlarla çalışmanın başka bir yöntemidir. Metninizi ortalayacak ve üst metin içindeki konumunu koruyacaktır. Merkezlenmesini istemiyorsanız, daha da kolay, sadece absoluteparametrelerle çalışın . Ana kabın kullandığını unutmayın display: inline-block. Ne üzerinde çalıştığınıza bağlı olarak, bunu yapmanın başka birçok yolu vardır.

Bilinmeyeni Merkezlemeye Dayalı

Çalışma kodepen örneği burada

HTML

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

CSS

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

Neden ayarlanmamış sample.pngarkaplan görüntüsü olarak textveya h2css sınıfa? Bu, bir görüntünün üzerine yazdığınız gibi etki sağlayacaktır.

Duyarlı bir tasarım için, göreceli bir düzene ve sabit yerleşime sahip içeriğe (konteynere yerleştirilmiş) sahip bir konteyner kullanmak iyidir.

CSS Stilleri:

/*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 Kodu:

<!-- 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 Izgara düzeni, eşit aralıklı ızgara öğeleri ve yukarıdaki HTML'de kullanılan sınıflar için lütfen bakın - Izgara: Eşit Aralıklı Sütunlar . Umarım size yardımcı olur ... :)

Harry Joy'un işaret ettiği gibi, görüntüyü div'in arka planı olarak ayarlayın ve ardından, yalnızca bir metin satırınız varsa, metnin satır yüksekliğini div yüksekliğiyle aynı olacak şekilde ayarlayabilirsiniz ve bu, metninizi div'in merkezi.

Birden fazla satırınız varsa, ekranı tablo hücresi ve dikey hizalamayı ortaya olarak ayarlamak isteyeceksiniz.

2017 itibariyle bu daha duyarlı ve benim için çalıştı. Bu, bir rozet gibi metni içine veya üstüne koymak içindir. 8 rakamı yerine, bir veritabanından veri çekecek bir değişkenim vardı.

bu kod Kailas'ın yukarıdaki cevabı ile başladı

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

HTML'im

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

ve css'im:

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

Aynısını yapmanın küçük ve kısa bir yolu

HTML

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

CSS

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