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

Mr_Raymon · #1 (**permalink**) 15/03/2011, 06:48

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<a href="#" class="firma">
        <ul>
        <li class="img_firma"><img src="img/firmas/instrumentacion/akcp.jpg" alt="AKCP"/></li>
        <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>
        </ul>
</a>

Código CSS:

Ver original.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; }
.firma p {padding:0px; line-height:22px; display: table-cell; vertical-align: middle; width: 100%;}
.firma:last-child {border-bottom:none;}
.img_firma {float:left; width:225px; padding-right:40px; text-align:center;}
.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.

kseso? · #2 (**permalink**) 15/03/2011, 09:51

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<ul>
        <li class="img_firma">
            <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>
 </li>
        <li class="img_firma">
            <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>
         </li>
     </ul>

y las imágenes las declara con vertical-align: middle.

Mr_Raymon · #3 (**permalink**) 15/03/2011, 13:13

Cita:

Iniciado por kseso?

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

Código CSS:

Ver original<ul>
        <li class="img_firma">
            <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.
            </a>
        <li class="img_firma">
            <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.
            </a>
         </li>
     </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.

kseso? · #4 (**permalink**) 15/03/2011, 13:25

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.

Mr_Raymon · #5 (**permalink**) 15/03/2011, 13:51

Cita:

Iniciado por kseso?

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.img_firma a {width:100&#37;; padding:30px; vertical-align:middle; display:block;}

CHuLoSoY · #6 (**permalink**) 15/03/2011, 14:03

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

Código CSS:

Ver original.img_firma img { vertical-align: middle; }

ó

Código HTML:

Ver original<img src="......." style="vertical-align: middle;">

saludos

Mr_Raymon · #7 (**permalink**) 15/03/2011, 14:14

Cita:

Iniciado por CHuLoSoY

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

Código CSS:

Ver original.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.

kseso? · #8 (**permalink**) 15/03/2011, 14:21

Cita:

Iniciado por kseso?

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

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"

CHuLoSoY · #9 (**permalink**) 15/03/2011, 14:53

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.

Mr_Raymon · #10 (**permalink**) 15/03/2011, 14:56

Cita:

Iniciado por kseso?

¿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.

kseso? · #11 (**permalink**) 15/03/2011, 15:06

Cita:

Iniciado por kseso?

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

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

Mr_Raymon · #12 (**permalink**) 15/03/2011, 16:19

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

kseso? · #13 (**permalink**) 16/03/2011, 08:05

Cita:

Iniciado por Mr_Raymon

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

Mr_Raymon · #14 (**permalink**) 16/03/2011, 13:08

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.