Foros del Web » Creando para Internet » CSS »

Alineacion vertical de un texto (parrafo) dentro de un enlace

Estas en el tema de Alineacion vertical de un texto (parrafo) dentro de un enlace en el foro de CSS en Foros del Web. Hola a todos. Tengo un pequeño problema que no consigo resolver. Estoy intentando colocar un texto de forma centrada verticalmente. Asi lo quiero hacer (diseño ...
  #1 (permalink)  
Antiguo 15/03/2011, 07:48
 
Fecha de Ingreso: diciembre-2009
Ubicación: España
Mensajes: 119
Antigüedad: 8 años
Puntos: 2
Alineacion vertical de un texto (parrafo) dentro de un enlace

Hola a todos.

Tengo un pequeño problema que no consigo resolver. Estoy intentando colocar un texto de forma centrada verticalmente.

Asi lo quiero hacer (diseño creado en Photoshop).



Asi queda en HTML.



El codigo del enlace es asi:

Código HTML:
Ver original
  1. <a href="#" class="firma">
  2.         <ul>
  3.         <li class="img_firma"><img src="img/firmas/instrumentacion/akcp.jpg" alt="AKCP"/></li>
  4.         <li class="inf_firma"><p>Equipos de Vigilancia de Parámetros Ambientales y envío de alarmas a través de la web.</p></li>
  5.         </ul>
  6. </a>

Código CSS:
Ver original
  1. .firma {float:left; border-bottom:dotted 1px #000; padding:25px 0px; margin:0px 30px; text-decoration:none; width:870px; color:#000; cursor:pointer; _margin:0px auto; _padding:0px 35px; }
  2. .firma p {padding:0px; line-height:22px; display: table-cell; vertical-align: middle; width: 100%;}
  3. .firma:last-child {border-bottom:none;}
  4. .img_firma {float:left; width:225px; padding-right:40px; text-align:center;}
  5. .inf_firma {float:left; width:575px;}

Como podeis ver el tamaño de la imagen es diferente y me gustaria que el texto estuviera centrado de forma vertical aunque el tamaño de la imagen cambie.

Saludos y Gracias.
  #2 (permalink)  
Antiguo 15/03/2011, 10:51
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Alineacion vertical de un texto (parrafo) dentro de un enlace

Editado para corregir el cierre del li que se había quedado por el camino:

Por partes:
No puede meter en un enlace una lista y sus contenidos.
Hágalo mucho más sencillo:

Código CSS:
Ver original
  1. <ul>
  2.         <li class="img_firma">
  3.             <a href="#"><img src="img/firmas/instrumentacion/akcp.jpg" alt="AKCP"/>Equipos de Vigilancia de Par&#225;metros Ambientales y env&#237;o de alarmas a trav&#233;s de la web.</a>
  4.  </li>
  5.         <li class="img_firma">
  6.             <a href="#"><img src="img/firmas/instrumentacion/akcp.jpg" alt="AKCP"/>Equipos de Vigilancia de Par&#225;metros Ambientales y env&#237;o de alarmas a trav&#233;s de la web.</a>
  7.          </li>
  8.      </ul>
y las imágenes las declara con vertical-align: middle.

Última edición por kseso?; 15/03/2011 a las 14:18
  #3 (permalink)  
Antiguo 15/03/2011, 14:13
 
Fecha de Ingreso: diciembre-2009
Ubicación: España
Mensajes: 119
Antigüedad: 8 años
Puntos: 2
Respuesta: Alineacion vertical de un texto (parrafo) dentro de un enlace

Cita:
Iniciado por kseso? Ver Mensaje
Por partes:
No puede meter en un enlace una lista y sus contenidos.
Hágalo mucho más sencillo:

Código CSS:
Ver original
  1. <ul>
  2.         <li class="img_firma">
  3.             <a href="#"><img src="img/firmas/instrumentacion/akcp.jpg" alt="AKCP"/>Equipos de Vigilancia de Parámetros Ambientales y envío de alarmas a través de la web.
  4.             </a>
  5.         <li class="img_firma">
  6.             <a href="#"><img src="img/firmas/instrumentacion/akcp.jpg" alt="AKCP"/>Equipos de Vigilancia de Parámetros Ambientales y envío de alarmas a través de la web.
  7.             </a>
  8.          </li>
  9.      </ul>
y las imágenes las declara con vertical-align: middle.
Se me habia olvidado comentarlo.

La idea de los enlaces y su contenido (<ul> y <li's> correspondientes) es que funcionen como si fuera un divisor y sea comodo para el usuario hacer click en cada elemento y acceder despues a la informacion. Basicamente por eso lo hice asi y creo que no es incorrecto. Lo intente con divisores en vez de enlaces pero no salia todo lo bien que deberia (sobretodo en IE6). De hecho funciona perfectamente desde IE6, Firefox, Safari y Chrome.

Me gustaria saber la opinion de los expertos sobre este tema al respecto.

De todas formas voy a probar tu metodo kseso? y a ver que ocurre.

Saludos y Gracias.
  #4 (permalink)  
Antiguo 15/03/2011, 14:25
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Alineacion vertical de un texto (parrafo) dentro de un enlace

Nota: Corregido el código en #2

Pruebe a ver si con el código propuesto no funciona como enlace tanto la imagen como el texto. De hecho, no es que funcione como, sino que es el enlace, uno sólo, la imagen y el texto descriptivo.

Pero note que sólo le hacía una única sugerencia para el alineamiento en vertical de la img y el texto, otros detalles de nivel estético y funcional no los contemplé puesto que no eran objeto de su consulta.
  #5 (permalink)  
Antiguo 15/03/2011, 14:51
 
Fecha de Ingreso: diciembre-2009
Ubicación: España
Mensajes: 119
Antigüedad: 8 años
Puntos: 2
Respuesta: Alineacion vertical de un texto (parrafo) dentro de un enlace

Cita:
Iniciado por kseso? Ver Mensaje
Nota: Corregido el código en #2

Pruebe a ver si con el código propuesto no funciona como enlace tanto la imagen como el texto. De hecho, no es que funcione como, sino que es el enlace, uno sólo, la imagen y el texto descriptivo.

Pero note que sólo le hacía una única sugerencia para el alineamiento en vertical de la img y el texto, otros detalles de nivel estético y funcional no los contemplé puesto que no eran objeto de su consulta.
Tranquilo, no es culpa tuya. De hecho es algo que tenia que haber comentado al principio pero mi atencion esta en la colocacion del texto como he dicho antes.

Acabo de probar el codigo y ha pasado lo que me imaginaba. Una imagen vale mas que mil palabras.



¿El codigo en CSS deberia ser asi?

Código CSS:
Ver original
  1. .img_firma a {width:100&#37;; padding:30px; vertical-align:middle; display:block;}
  #6 (permalink)  
Antiguo 15/03/2011, 15:03
Avatar de CHuLoSoY  
Fecha de Ingreso: febrero-2002
Ubicación: Ribeira (Galicia)
Mensajes: 1.900
Antigüedad: 15 años, 10 meses
Puntos: 29
Respuesta: Alineacion vertical de un texto (parrafo) dentro de un enlace

El vertical-align:middle; pónselo a la imagen

Código CSS:
Ver original
  1. .img_firma img { vertical-align: middle; }

ó

Código HTML:
Ver original
  1. <img src="......." style="vertical-align: middle;">
saludos
__________________
ESQUIO Dominios y Hosting
Las mejores características con los mejores precios.
  #7 (permalink)  
Antiguo 15/03/2011, 15:14
 
Fecha de Ingreso: diciembre-2009
Ubicación: España
Mensajes: 119
Antigüedad: 8 años
Puntos: 2
Respuesta: Alineacion vertical de un texto (parrafo) dentro de un enlace

Cita:
Iniciado por CHuLoSoY Ver Mensaje
El vertical-align:middle; pónselo a la imagen

Código CSS:
Ver original
  1. .img_firma img { vertical-align: middle; }
Efectivamente, asi si funciona pero todavia esta el problema del enlace que lo tapa la imagen. De hecho si le doy padding-right a .img_firma img para que tenga una separacion entre la imagen y el texto, se ve "el truco" por asi decirlo.

¿Alguna manera de solucionarlo sin tener que quitar el subrayado?

Saludos y Gracias CHuLoSoY.
  #8 (permalink)  
Antiguo 15/03/2011, 15:21
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Alineacion vertical de un texto (parrafo) dentro de un enlace

Cita:
Iniciado por kseso? Ver Mensaje
y las imágenes las declara con vertical-align: middle.
Debería haberlo puesto con mayor font-size y negritas, creo.

Cita:
Iniciado por Mr_Raymon Ver Mensaje
Efectivamente, asi si funciona pero todavia esta el problema del enlace que lo tapa la imagen. De hecho si le doy padding-right a .img_firma img para que tenga una separacion entre la imagen y el texto, se ve "el truco" por asi decirlo.

¿Alguna manera de solucionarlo sin tener que quitar el subrayado?

Saludos y Gracias CHuLoSoY.
¿A qué enlace tapa la imagen?
¿Qué truco es el que se ve y no debería?
Debería esforzase un poco más al exponer sus dudas.
P.D.: para separar elementos está el "margin"
  #9 (permalink)  
Antiguo 15/03/2011, 15:53
Avatar de CHuLoSoY  
Fecha de Ingreso: febrero-2002
Ubicación: Ribeira (Galicia)
Mensajes: 1.900
Antigüedad: 15 años, 10 meses
Puntos: 29
Respuesta: Alineacion vertical de un texto (parrafo) dentro de un enlace

Como ya te han dicho, para separar utiliza margin-right
Padding es la separación que hay entre el borde de un elemento y su contenido. Equivalente a cellpadding de las tablas. y margin es por así decirlo equivalente al cellspacing

saludos.
__________________
ESQUIO Dominios y Hosting
Las mejores características con los mejores precios.
  #10 (permalink)  
Antiguo 15/03/2011, 15:56
 
Fecha de Ingreso: diciembre-2009
Ubicación: España
Mensajes: 119
Antigüedad: 8 años
Puntos: 2
Respuesta: Alineacion vertical de un texto (parrafo) dentro de un enlace

Cita:
Iniciado por kseso? Ver Mensaje
¿A qué enlace tapa la imagen?
¿Qué truco es el que se ve y no debería?
Debería esforzase un poco más al exponer sus dudas.
P.D.: para separar elementos está el "margin"
Lo que me refiero con "el truco" es si te has dado cuenta en la ultima imagen que he puesto se ve el enlace subrayado con la imagen. Al poner vertical-align como me has dicho se alinea de forma centrada y tapa en la parte de la imagen el subrayado del enlace. A continuacion añado padding-right para que tenga una separacion y se ve "el truco" (el subrayado se entiende).

En este caso es mejor utilizar padding porque si se utiliza margin deja un espacio en blanco y justo en ese espacio no se puede hacer click. No se si me explico bien.

Saludos y Gracias.
  #11 (permalink)  
Antiguo 15/03/2011, 16:06
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Alineacion vertical de un texto (parrafo) dentro de un enlace

Cita:
Iniciado por kseso? Ver Mensaje
Pero note que sólo le hacía una única sugerencia para el alineamiento en vertical de la img y el texto, otros detalles de nivel estético y funcional no los contemplé puesto que no eran objeto de su consulta.
Cita:
Iniciado por Mr_Raymon Ver Mensaje
En este caso es mejor utilizar padding porque si se utiliza margin deja un espacio en blanco y justo en ese espacio no se puede hacer click. No se si me explico bien.

Saludos y Gracias.
Margin, margin y margin.
Repito:
margin, margin y margin.
El padding tiene otras encomiendas.

Si quiere que un elemento de línea (como es un enlace) ocupe toda la superficie del li que lo contiene (que es de bloque) declárelo tambien con display: block y voilá
Pero esto es algo muy básico. Mi sugerencia sería que tenga siempre a mano los pdf´s de www.librosweb.es
  #12 (permalink)  
Antiguo 15/03/2011, 17:19
 
Fecha de Ingreso: diciembre-2009
Ubicación: España
Mensajes: 119
Antigüedad: 8 años
Puntos: 2
Respuesta: Alineacion vertical de un texto (parrafo) dentro de un enlace

Lo tendre en cuenta.

Muchas consultas que tengo suelo mirar en la web de LibrosWeb para resolverlas.

Antes de terminar, como ya he dicho antes, me gustaria saber la opinion de gente entendida sobre si es correcto la etiquetacion que hice al principio (creo que si lo es). Estoy interesado en saberlo para proximos proyectos.

Saludos y Gracias a todos :)
  #13 (permalink)  
Antiguo 16/03/2011, 09:05
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Alineacion vertical de un texto (parrafo) dentro de un enlace

Cita:
Iniciado por Mr_Raymon Ver Mensaje
Lo tendre en cuenta.<-- Perfecto, porque la cuestión quedó resuelta en #2, y ya vamos por #13

Muchas consultas que tengo suelo mirar en la web de LibrosWeb para resolverlas.

Antes de terminar, como ya he dicho antes, me gustaria saber la opinion de gente entendida sobre si es correcto la etiquetacion que hice al principio<-- Vaya por delante que sólo soy un enredique de css, no tengo nada ni de entendido ni de experto. Pero ya se le indicó (en #2). Y no es cuestión de opiniones, sino de estándares. (creo que si lo es)<--Como veo se empeña en ignorar la respuesta ofrecida (ya en #2), a falta de saber qué doctype declara, vaya usted mismo al validador y verifique por usted mismo si es válido o no. Estoy interesado en saberlo para proximos proyectos.

Saludos y Gracias a todos :)
  #14 (permalink)  
Antiguo 16/03/2011, 14:08
 
Fecha de Ingreso: diciembre-2009
Ubicación: España
Mensajes: 119
Antigüedad: 8 años
Puntos: 2
Respuesta: Alineacion vertical de un texto (parrafo) dentro de un enlace

Nadie es perfecto.

Precisamente si lo pregunto es porque tengo dudas y para eso sirven los foros. Cada uno tenemos nuestra forma de pensar y actuar.

Otra cosa, no ignoro la respuesta porque si lo hubiera hecho no seguiria utilizandolo y ni siquiera lo hubiera probado ¿no te parece?

Tambien es bueno preguntar mas fuentes sobre los temas porque puede haber varias maneras de hacer las cosas.

Con esto no pretendo ir contra ti ni mucho menos. Simplemente es mi punto de vista.

Saludos.

Etiquetas: alineacion, vertical
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:28.