Bagaimana memposisikan teks di atas gambar di css

Bagaimana cara memusatkan teks di atas gambar di css?

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

Saya ingin melakukan sesuatu seperti di bawah ini tetapi saya mengalami kesulitan, inilah css saya saat ini

<style>
.image {
   position: relative;
}

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

Ketika saya menggunakan gambar latar belakang, saya tidak mendapatkan keluaran apa pun dari 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();
?>

Berikut prints.php:

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

Bagaimana dengan sesuatu seperti ini: http://jsfiddle.net/EgLKV/3/

Ini dilakukan dengan menggunakan position:absolutedan z-indexmenempatkan teks di atas gambar.

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

Ini adalah metode lain untuk bekerja dengan ukuran Responsif. Ini akan membuat teks Anda tetap di tengah dan mempertahankan posisinya di dalam induknya. Jika Anda tidak ingin menempatkannya di tengah maka akan lebih mudah lagi, cukup gunakan absoluteparameternya. Ingatlah bahwa wadah utama sedang digunakan display: inline-block. Ada banyak cara lain untuk melakukan ini, tergantung pada apa yang Anda kerjakan.

Didasarkan dari Centering the Unknown

Contoh codepen bekerja di sini

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

Mengapa tidak ditetapkan sample.pngsebagai gambar latar belakang textatau h2kelas css? Ini akan memberi efek seperti yang Anda tulis di atas gambar.

Untuk desain responsif, sebaiknya gunakan wadah yang memiliki tata letak relatif dan konten (ditempatkan dalam wadah) yang memiliki tata letak tetap sebagai.

Gaya CSS:

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

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

Untuk tata letak Kisi IONIC, elemen kisi dengan spasi merata dan kelas yang digunakan dalam HTML di atas, silakan lihat - Kisi: Kolom Berukuran Rata . Semoga membantu Anda ... :)

seperti yang ditunjukkan Harry Joy, atur gambar sebagai latar belakang div dan kemudian, jika Anda hanya memiliki satu baris teks, Anda dapat mengatur tinggi baris teks menjadi sama dengan tinggi div dan ini akan menempatkan teks Anda di pusat div.

Jika Anda memiliki lebih dari satu baris, Anda ingin mengatur tampilan menjadi sel tabel dan perataan vertikal ke tengah.

per 2017 ini lebih responsif dan bekerja untuk saya. Ini untuk meletakkan teks di dalam vs di atas, seperti lencana. Alih-alih angka 8, saya memiliki variabel untuk menarik data dari database.

kode ini dimulai dengan jawaban Kailas di atas

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

HTML saya

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

dan css saya:

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

Cara kecil dan singkat untuk melakukan hal yang sama

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