Question

我正在为自己创建一个新的投资组合网站，使用我修改过的wordpress主题以满足我的需求。该网站可以找到here。

该网站主要按照我的意愿行事，但目前主页上的各个帖子都与左侧对齐。我希望他们做的是将自己分发到页面的中心。不幸的是，由于我对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;
}

有没有人有任何想法？我（显然）不是网络开发人员，所以如果这听起来很愚蠢的话，请耐心等待。

Answer 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布局为中心的。希望有所帮助。（确保在我添加的那行之前加入逗号。）

如何将此响应式布局居中？

1 个答案: