Cómo colocar texto sobre una imagen en CSS

¿Cómo centro un texto sobre una imagen en CSS?

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

Quiero hacer algo como el siguiente pero tengo dificultades, aquí está mi CSS actual

<style>
.image {
   position: relative;
}

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

Cuando uso background-image no obtengo ningún resultado de 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();
?>

Aquí está prints.php:

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

¿Qué tal algo como esto: http://jsfiddle.net/EgLKV/3/

Se hace usando position:absolutey z-indexpara colocar el texto sobre la imagen.

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

Este es otro método para trabajar con tamaños receptivos. Mantendrá su texto centrado y mantendrá su posición dentro de su padre. Si no quieres que esté centrado, entonces es aún más fácil, solo trabaja con los absoluteparámetros. Tenga en cuenta que el contenedor principal está utilizando display: inline-block. Hay muchas otras formas de hacer esto, dependiendo de en qué esté trabajando.

Basado en Centrar lo desconocido

Ejemplo de codepen de trabajo aquí

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

¿Por qué no establecer sample.pngla imagen de fondo como texto h2clase CSS? Esto dará efecto cuando haya escrito sobre una imagen.

Para un diseño receptivo, es bueno usar un contenedor que tenga un diseño relativo y contenido (colocado en un contenedor) que tenga un diseño fijo como.

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

Código 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>

Para el diseño de cuadrícula IONIC, elementos de cuadrícula espaciados uniformemente y las clases utilizadas en el HTML anterior, consulte - Cuadrícula: columnas espaciadas uniformemente . Espero que te ayude ... :)

como señala Harry Joy, configure la imagen como fondo del div y luego, si solo tiene una línea de texto, puede establecer que la altura de la línea del texto sea la misma que la altura del div y esto colocará su texto en el centro de la div.

Si tiene más de una línea, querrá configurar la pantalla para que sea una celda de tabla y una alineación vertical en el centro.

a partir de 2017, esto es más receptivo y funcionó para mí. Esto es para poner texto dentro o encima, como una insignia. En lugar del número 8, tenía una variable para extraer datos de una base de datos.

este código comenzó con la respuesta de Kailas arriba

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

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

y mi css:

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

Una pequeña y corta forma de hacer lo mismo

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