Cómo posicionar texto sobre una imagen en css

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

Basado en Centrando 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.png como imagen de fondo de la clase css text o h2? Esto dará efecto como usted ha escrito sobre una imagen.

Para un diseño responsivo, es bueno usar un contenedor que tenga un diseño relativo y un contenido (colocado en el 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 IÓNICA, los 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, establezca la imagen como el fondo del div y luego, si solo tiene una línea de texto, puede establecer la altura de la línea del texto para que sea la misma que la altura del div y esto colocará su texto en el centro del div.

Si tiene más de una línea, querrá configurar la pantalla para que sea table-cell y vertical-alignment en middle.

A partir de 2017 esto es más sensible y funcionó para mí. Esto es para poner texto dentro de vs over, 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 forma pequeña y corta 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;
    }