elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Como proteger una cartera - billetera de Bitcoin


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  [Resuelto] Alinear texto dentro de imagen (IE)
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: [Resuelto] Alinear texto dentro de imagen (IE)  (Leído 2,871 veces)
.:UND3R:.
Moderador Global
***
Desconectado Desconectado

Mensajes: 3.118


Ingeniería inversa / MASM


Ver Perfil WWW
[Resuelto] Alinear texto dentro de imagen (IE)
« en: 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
  1. <style type="text/css">
  2. .image {
  3.   position: absolute;
  4.   top: 0;
  5.   left: 0;
  6.   right: 0;
  7.   bottom: 0;
  8.   width: 101px;
  9.   height: 127px;
  10.   text-align: center;
  11.   z-index: -1;
  12. }
  13.  
  14. #text_online {
  15.  position: absolute;
  16.  top: 2px;
  17.  left: 10px;
  18.  right: 0;
  19.  bottom: 0;
  20.  color: white;
  21.  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  22.  font-size: 12px;
  23.  z-index: 1;
  24. }
  25. </head>
  26. <div class="image">
  27. <img src="img/bg_status.png"/>  
  28. <p id="text_online">14 Online<p>
  29. </div>
  30. </body>
  31. </html>

SOLUCIONADO:

Código
  1. #text_online {
  2.  position: absolute;
  3.  top: 2px;
  4.  left: 0px;
  5.  bottom: 0;
  6.  width: 100%;
  7.  color: white;
  8.  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  9.  font-size: 12px;
  10.  z-index: 1;
  11. }


« Última modificación: 15 Febrero 2016, 18:49 pm por #!drvy » En línea


Solicitudes de crack, keygen, serial solo a través de mensajes privados (PM)
karmany
Colaborador
***
Desconectado Desconectado

Mensajes: 1.614


Sueñas que sueñas


Ver Perfil WWW
Re: Alinear texto dentro de imagen (IE)
« Respuesta #1 en: 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
  1.    <head>
  2.    <style type="text/css">
  3.    .image {
  4.   position: absolute;
  5.   top: 0;
  6.   left: 100px;
  7.   width: 256px;
  8.   height: 256px;
  9.   text-align: center;
  10.   z-index: -1;
  11.   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAMAAABrrFhUAAADAFBMVEUAAAD////ZNgDAwMAAmf8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADFzOsiAAABWElEQVR42u3SMQ7AIAwEweD8/8kQUlDSX+FZyf1p5FHr6VyN9IJ0AP570yNizQPQ9Q0+AAAAAAAAAAAAAOklAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAANJLAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcAVID4l1AFoHoFZ6QrTaT3T1FF0Ch7cAAAAASUVORK5CYII=')
  12. }
  13.  
  14. #text_online {
  15.  margin-top: 110px;
  16.  display: inline-block;
  17.  color: white;
  18.  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  19.  font-size: 12px;
  20.  z-index: 1;
  21.    }
  22.    </style>
  23.    </head>
  24.    <body>
  25.    <div class="image">
  26.     <p id="text_online">14 Online<p>
  27.    </div>
  28.    </body>
  29.    </html>

Puedes observarlo, por ejemplo, desde aquí: https://jsfiddle.net/ pegando el código HTML y CSS anterior.


En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
alinear texto
Programación C/C++
m@o_614 8 7,659 Último mensaje 10 Febrero 2013, 20:20 pm
por do-while
Alinear texto (Solucionado) « 1 2 »
Programación C/C++
nolasco281 11 7,969 Último mensaje 26 Marzo 2014, 17:46 pm
por leosansan
Alinear texto a la derecha
Programación C/C++
Sothu 4 3,301 Último mensaje 12 Diciembre 2015, 19:38 pm
por fary
[Resuelto] [DUDA] Alinear vericalmente
Desarrollo Web
kaskull 6 2,328 Último mensaje 9 Enero 2016, 16:44 pm
por MinusFour
[Resuelto] no puedo alinear aside
Desarrollo Web
Beginner Web 3 3,093 Último mensaje 1 Abril 2020, 06:26 am
por EdePC
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines