0

我正在为自己开发一个新的投资组合网站，使用我已经修改以满足我的需要的 wordpress 主题。该网站可以在这里找到。

该网站大部分时间都在做我想做的事，但目前主页上的各个帖子都与左侧对齐。我希望他们做的是将自己分布在页面的中心。不幸的是，由于我对 css 的了解有限，我无法弄清楚这一点。

有问题的CSS（我认为）：

#post-area .post { 
    width:310px; 
    background:#FFF; 
    margin-right:10px; 
    margin-top:15px; 
    position:relative; 
}

#post-area .post .gridly-copy { 
    width:250px; 
    margin-left:auto; 
    margin-right:auto; 
    padding-top:10px; 
    padding-bottom:20px; 
    overflow:hidden; clear:both;
}

有没有人有任何想法？我（显然）不是网络开发人员，所以如果这听起来很愚蠢，请多多包涵。

4

1 回答 1

1

您正在使用 masonry jQuery 脚本，它可以选择将内容居中而不是向左对齐。如果您访问该站点 ( http://masonry.desandro.com/ )，则可以选择将列居中。（不幸的是，该网站现在对我来说已经关闭，但希望它会再次出现。）

您确实需要使用该解决方案，因为这些框设置为position: absolute，因此尝试覆盖当前样式将是一场噩梦（如果可能的话）。

编辑：没有那个网站回来，你可以尝试一些实验。看看你是否可以在你的系统中找到这个文件：http ://www.finlaydownes.com/wp-content/themes/gridly/js/functions.js?ver=3.5.1

它包括以下代码：

// masonry code 
$(document).ready(function() {
  $('#post-area').masonry({
    // options
    itemSelector : '.post',
    // options...
  isAnimated: true,
  animationOptions: {
    duration: 400,
    easing: 'linear',
    queue: false
  }

  });
});

尝试将其更改为：

// masonry code 
$(document).ready(function() {
  $('#post-area').masonry({
    // options
    itemSelector : '.post',
    // options...
  isAnimated: true,
  animationOptions: {
    duration: 400,
    easing: 'linear',
    queue: false
  },
  isFitWidth: true

  });
});

我刚刚添加了isFitWidth: true，它最近对我有用，可以使 Masonry 布局居中。希望有帮助。（确保在我添加的那一行之前包含逗号。）

于 2013-06-13T00:54:39.450 回答