JavaScript - centrar texto en un div

 
Vista:

centrar texto en un div

Publicado por santi (8 intervenciones) el 10/09/2003 13:19:00
Hola a tod@s.
Tengo la siguiente duda:
Quiero colocar un texto centrado (horizontal y verticalmente) sobre una imagen que está dentro de una tabla.
El texto lo he ubicado dentro de una capa.
Es decir, tengo el siguiente codigo:
<table><tr><td>
<img src="1.gif" name="img_1" width="100" height="100">
<div id="texto" align="center" style="position:relative; v-align:center">Bla bla bla</div>
</td></tr></table>

Con este código el texto se centra horizontalmente, pero no verticalmente.

Alguien sabe donde está el error?

Muchas gracias!
saludos.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

RE:centrar texto en un div

Publicado por Juan (38 intervenciones) el 10/09/2003 13:52:39
Si lo que quieres es que el texto se ponga sobre la imagen tienes dos opciones:
Poner el texto en posición absoluta o la imagen como fondo del div.

Te pongo un ejemplo de lo segundo:

<html>
<head></head>
<body>
<table><tr><td>
<div id="texto" align="center" style="padding-top:30;background-image:url(1.gif);width:100;height:100">Bla bla bla</div>
</td></tr></table>
</body>
</html>

Cambia los valores de los atributos width y height por el ancho y alto de tu imagen.

Nota: no he podido centrar el texto verticalmente, pero puedes poner márgenes con los atributos padding, y simular una distancia hasta el borde superior de manera que parezca que el contenido está centrado.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

RE:centrar texto en un div

Publicado por santi (8 intervenciones) el 15/09/2003 10:26:30
Hola.

Gracias por ayudarme. Ya está resuelto. Apliqué la primera solución, poniendo el div en posicion absoluta:
<table>
<tr>
<td><img src="1.gif" name="img_1" width="250" height="150">
<div id="text" style="position:absolute;top:110px;left:85px;">Texto</div>
</td>
</tr>
</table>

Un saludo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar