¿Tratas de centrar leer más enlace en div hover?

He creado 2 divs de contenido, grandes y medianos, sobre los que quiero desplazarme y mostrar un enlace de más información. Sin embargo, en este momento, ¿tengo problemas para centrar el enlace de más información en medio de la división?

También hay una mejor manera de escribir esto? Estoy aprendiendo js / jquery en este momento y tratando de resolver varias cosas que pueden resultar útiles en los proyectos.

¿Se podría escribir el código de modo que no importa cuál sea el tamaño del div contenedor, la lectura se adapte para encajar en el centro?

La fuente se puede ver aquí http://jsfiddle.net/kyllle/R9NNt/

Centra horizontalmente la div dando width: 100%; text-align: center; width: 100%; text-align: center;

http://jsfiddle.net/R9NNt/5/

y aquí para verticalmente.

http://jsfiddle.net/R9NNt/21/

Aquí el código jQuery:

 $(function() { $(".large, .medium").hover( function() { $(this).children(".content").fadeTo(200, 0.25).end().children(".hover").show(); }, function() { $(this).children(".content").fadeTo(200, 1).end().children(".hover").hide(); } ).each( function( index, item ) { var hover = $(this).find('.hover'); var top = Math.round( ( $(this).find('.content img').outerHeight() - hover.outerHeight() ) / 2); hover.css('top', top + 'px'); }); }); 

Es fácil centrar horizontalmente haciendo width: 100%; text-align: center; width: 100%; text-align: center; en la división de contenido, pero cuando se trata del centrado vertical de CSS, es una pesadilla, especialmente con diseños / elementos líquidos de tamaño desconocido.

A medida que se conocen sus tamaños, vale la pena echar un vistazo a un centrado vertical con CSS que detalla muchos ejemplos de cómo centrar verticalmente el contenido. Cuando se trata de contenido líquido, te dejo en un pequeño secreto

Renunciar y usar tablas

Boo that was easy. Kick the table police in the balls and let's start doing something productive now.

Boo that was easy. Kick the table police in the balls and let's start doing something productive now.

Agregué este css:

 .hover, .medium{ width: 100%; text-align: center; } 

http://jsfiddle.net/R9NNt/22/

algo bueno para ti?