Centrar flecha con texto

Laika · #1 (**permalink**) 26/08/2009, 01:58

Hola,

Tengo en una capa un texto en el que en 2 lineas hay una flecha en cada una de ellas. Despues de cada flecha de cada linea hay un texto.

El oriblema es que la flecha está metida en un circulo y es más alto que el tamaño del texto. No me queda centrado verticalmente el texto conla bola que contiene la flecha.

¿Como puedo solucionar esto? No se si me he explicado bien...

kseso? · #2 (**permalink**) 26/08/2009, 06:32

¿Y si pones los códigos html + css implicados y ofreces algo más de información: si la imagen es un fondo, qué tamaño tiene...?

Pero sólo es una sugerencia, Laika, a no ser que quieras algo tan genérico como preguntarte si ya utilizaste el "line-height" u otras propiedades relacionadas con los textos.

Laika · #3 (**permalink**) 27/08/2009, 01:29

Nada no lo condigo con eso.

LO que tengo son estas 2 lineas de texto:

Cita:

<p> <img src="images/flecha.gif" width="17" height="17" /> Texto1<br />
<img src="images/flecha.gif" width="17" height="17" />Texto2</p>

Los 17 pixeles de altura de la foto son mas grandes que la altura del texto y por eso no me queda centrado.

¿Alguna otra idea?

jomaruro · #4 (**permalink**) 27/08/2009, 13:25

Hola:

Cita:

Iniciado por Laika

¿Alguna otra idea?

¿Has leído lo que te ha dicho Kseso? sobre poner los códigos implicados?

Saludos.

deirdre · #5 (**permalink**) 28/08/2009, 17:50

Hola Laika

Por tu antigüedad en el foro y los numerosos posts que has escrito presupongo que ya sabes que cuántos más datos incorpores en tu pregunta mucho mejor es para quienes queremos (e intentamos) ayudar. Insisto y comparto lo que comenta kseso? y que recuerda jomaruro sobre este aspecto.

Yo creo que te refieres a conseguir un nivelado en la horizontal entre una pequeña imagen, a modo de viñeta, y el texto que la sigue. Si estoy en lo cierto prueba esto, a mí me funciona:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Prueba para Layka</title>
<style type="text/css">
.texto {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
}
.altura {
	position: relative;
	top: -5px;
}
</style>
</head>

<body>

<p><img alt="" src="images/flecha.gif" width="17" height="17" /><span class="texto altura">Texto 1</span></p>
<p><img alt="" src="images/flecha.gif" width="17" height="17" /><span class="texto altura">Texto 2</span></p>

<p><img alt="" src="images/flecha.gif" width="17" height="17" /><span class="texto altura">Texto 1</span><br />
<img alt="" src="images/flecha.gif" width="17" height="17" /><span class="texto altura">Texto 2</span></p>

</body>

</html>

Esperando comentario...

Bye

Laika · #6 (**permalink**) 31/08/2009, 02:32

Mcuhas gracias es lo que necesitaba