texto centrado horizontal sobre la imagen a través de CSS

Question

Consideremos el siguiente código HTML:

<div class="image"> 
    <img src="sample.png"/> 
    <div class="text"> 
     Text of variable length 
    </div> 
</div> 

Dónde:

.image { 
    position:relative; 
    text-align:center; // doesn't work as desired :(
} 

.text { 
    position:absolute; 
    top:30px; 
} 

¿Puede usted por favor decir, si hay una manera de alinear horizontalmente el texto en el centro de el .image div? No puedo utilizar la propiedad left, ya que se desconoce la longitud del texto y la propiedad text-align no funciona para la .text div :(

Gracias.

Answer 1

Prueba el siguiente CSS:

.image { 
    position:relative; 
} 

.text { 
    left: 0; 
    position:absolute; 
    text-align:center; 
    top: 30px; 
    width: 100% 
} 

Answer 2

¿Puede usted no usar la imagen como el imagen de fondo del div 'imagen' utilizando background-image: url ('/ yourUrl /'); y luego, en lugar de tener su texto en su propio div, simplemente colóquelo en el div de la imagen y luego aplique text-align: center;

Answer 3

Primero debe flotar el elemento .image, para 'colapsar' sus descendientes de nivel de bloque al ancho del elemento, y luego usar text-align en el .text elemento:

.image { 
    float: left; 
} 
.text { 
    text-align: center; 
} 

JS Fiddle demo.

O simplemente podría darle una display: inline-block, lo que le permitirá tener sus contenidos a nivel de bloque contenían, y permanecen en el flujo de documentos:

.image { 
    display: inline-block; 
} 
.text { 
    text-align: center; 
} 

JS Fiddle demo.

Answer 4

Prueba esto:

.image { 

    position:relative; 
} 

.text { 
    width:100%; 

    height:100%; 
    position: absolute; 
    top: 0; 
    left: 0px; 
    justify-content: center; 
    flex-direction: column; 
    align-items: center; 
    display: flex; 
}