0

我一直在研究一个新的布局：http: //meaaas.tumblr.com/这是一个完全水平的布局，这意味着它完全从一侧滚动到另一侧而不是上下滚动。是否有任何可能的方法来使用我必须制作的当前代码，以便帖子与垂直​​中心对齐，而不是仅仅与顶部对齐？

4

2 回答 2

1

最简单的方法是编写一个快速的 Jquery 小脚本：

var contain = $('#posts').height();
$('.post').each(function(){
    var spacing = (contain - $(this).height());
    var top = spacing/2;
    $(this).css('margin-top', top);
});

更新

将其包含在页面底部的“BEGIN TUBMLR CODE”标签之前：

<script  type="text/javascript">
$(document).ready(function(){
     var contain = $('#posts').height();
     $('.post').each(function(){
         var spacing = (contain - $(this).height());
         var top = spacing/2;
         $(this).css('margin-top', top);
     });
});
</script>
于 2013-07-05T17:23:36.523 回答
0

众所周知，这是一件非常棘手的事情。这篇文章有一些建议，每一个都有优点和缺点。

如果您愿意添加一些 javascript，那可能是最容易理解的事情。只需编写一些代码来检查窗口的大小并计算上边距应该是多少。您还可以添加调整大小功能，以便在更改窗口大小时重新计算边距（使用window.onresize事件）

更新这里有一些非常天真的javascript：

function verticallyCenter(elementID){
    var windowheight = document.documentElement.clientHeight;
    document.getElementById(elementID).style.marginTop = windowheight / 4;
}

将其添加到页面中的<script>块中<head>，然后添加onload="verticallyCenter(elementID)"到<body>标签中。您需要替换elementID为要居中的 div 的 ID。您可能还希望比仅使用页面高度的四分之一更好地考虑内容的高度。

于 2013-07-05T17:20:20.113 回答