Hola a todos, tengo el siguiente código pero en IE no logro que se alinee el texto dentro de la imagen, a ver si alguien me guía, saludos:
<html>
<head>
<style type="text/css">
.image {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 101px;
height: 127px;
text-align: center;
z-index: -1;
}
#text_online {
position: absolute;
top: 2px;
left: 10px;
right: 0;
bottom: 0;
color: white;
font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
font-size: 12px;
z-index: 1;
}
</style>
</head>
<body>
<div class="image">
<img src="img/bg_status.png"/>
<p id="text_online">14 Online<p>
</div>
</body>
</html>
SOLUCIONADO:
#text_online {
position: absolute;
top: 2px;
left: 0px;
bottom: 0;
width: 100%;
color: white;
font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
font-size: 12px;
z-index: 1;
}
Yo hubiese puesto la imagen de background ya que evitas que se sobredimensione respecto al div y solo trabajas con el <div> y con el párrafo <p>
Para centrar el texto verticalmente lo puedes hacer con un margin-top y para centrarlo horizontalmente puedes hacerlo con text-align: center. En el párrafo yo no usaría position:absolute y le daría al párrafo un estilo en bloque: inline-block.
Échale un vistazo, si quieres, a este código:
<html>
<head>
<style type="text/css">
.image {
position: absolute;
top: 0;
left: 100px;
width: 256px;
height: 256px;
text-align: center;
z-index: -1;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAMAAABrrFhUAAADAFBMVEUAAAD////ZNgDAwMAAmf8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADFzOsiAAABWElEQVR42u3SMQ7AIAwEweD8/8kQUlDSX+FZyf1p5FHr6VyN9IJ0AP570yNizQPQ9Q0+AAAAAAAAAAAAAOklAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAANJLAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcAVID4l1AFoHoFZ6QrTaT3T1FF0Ch7cAAAAASUVORK5CYII=')
}
#text_online {
margin-top: 110px;
display: inline-block;
color: white;
font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
font-size: 12px;
z-index: 1;
}
</style>
</head>
<body>
<div class="image">
<p id="text_online">14 Online<p>
</div>
</body>
</html>
Puedes observarlo, por ejemplo, desde aquí: https://jsfiddle.net/ (https://jsfiddle.net/) pegando el código HTML y CSS anterior.