Question

我已经创建了2个内容divs大中型我想悬停并显示一个更多的链接，但是当时我很难将div中间的读取更多链接居中？

还有更好的方法来编写脚本吗？我现在正在学习js / jquery，并试图找出可能在项目中得到应用的各种方法。

可以编写代码，这样无论容器div的大小如何，读取的内容都会适应中心吗？

可在此处查看来源http://jsfiddle.net/kyllle/R9NNt/

Answer 1

通过给予width: 100%; text-align: center;

来对div进行水平居中

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

这里是垂直的。

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

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

Answer 2

我添加了这个css：

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

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

对你有好处吗？

Answer 3

通过在内容div上执行width: 100%; text-align: center;可以轻松实现水平居中，但是当涉及到CSS垂直居中时，这是一场噩梦，尤其是液体布局/大小未知的事物。

由于您的尺寸已知，因此值得一看Vertical centering with CSS，其中详细介绍了如何垂直居中内容的许多示例。在处理液体内容时，我会告诉你一个小秘密

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>

试图集中阅读div hover上的更多链接？

3 个答案: