Trying to center read more link on div hover?
I've created 2 content divs large and medium that I want to ho开发者_StackOverflow社区ver over and display a read more link, at the moment however Im having trouble actually centering the read more link in the middle of the div?
Also is there a better way to script this? Im learning js/jquery at the moment and trying to work out various things that may prove handy in projects.
Could code be written so that no matter what the container div size the read more will adapt to fit onto the center?
Source can be viewed here http://jsfiddle.net/kyllle/R9NNt/
Horizontal center the div by giving width: 100%; text-align: center;
http://jsfiddle.net/R9NNt/5/
and here for vertically.
http://jsfiddle.net/R9NNt/21/
here the jQuery code:
$(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');
});
});
It's easy to horizontally center by doing width: 100%; text-align: center;
on the content div, but when it comes to CSS vertical centering it's a nightmare, particularly with liquid layouts/things that are of an unknown size.
As your sizes are known, it's worth taking a look a Vertical centering with CSS which details many examples of how to vertically center content. When dealing with liquid content, I'll let you into a little secret
Give Up And Use Tables
<table><tr><td align="center" valign="center">Boo that was easy. Kick the table police in the balls and let's start doing something productive now.</td></tr></table>
I added this css:
.hover, .medium{
width: 100%;
text-align: center;
}
http://jsfiddle.net/R9NNt/22/
any good for you?
精彩评论