尝试中心阅读更多的链接div悬浮？ [英] Trying to center read more link on div hover?

问题描述

我已经创建了2个内容divs大和中，我想悬停在上面，并显示一个阅读更多的链接，但是我有麻烦实际中心阅读更多的链接中间的div？

I've created 2 content divs large and medium that I want to hover 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?

还有一个更好的方式来编写脚本？现在我在学习js / jquery，试图制定各种可能在项目中证明很方便的东西。

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.

可以编写代码，以便无论什么容器div大小阅读更多将适应中心？

Could code be written so that no matter what the container div size the read more will adapt to fit onto the center?

源可以在这里查看 http://jsfiddle.net/kyllle/R9NNt/

推荐答案

水平居中通过给予 width：100％; text-align：center;

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

此处为垂直。

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

这里是jQuery代码：

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');
    });
});

这篇关于尝试中心阅读更多的链接div悬浮？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！