[Resuelto] Alinear texto dentro de imagen (IE)

.:UND3R:. · 8 Febrero 2016, 07:55 AM

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:

Código (html4strict) [Seleccionar]

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

Código (html4strict) [Seleccionar]

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

karmany · 8 Febrero 2016, 21:25 PM

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:

Código (html4strict) [Seleccionar]

<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/ pegando el código HTML y CSS anterior.

Test Foro de elhacker.net SMF 2.1

[Resuelto] Alinear texto dentro de imagen (IE)

.:UND3R:.

karmany