响应式灯箱不居中内容

Question

我正在使用这个演示：http://blog.templatemonster.com/demos/coding-a-responsive-lightbox-image-gallery-for-website-portfolios/demo/index.html

从这里开始：http://blog.templatemonster.com/2014/05/20/coding-responsive-lightbox-gallery-portfolios-tutorial/

有没有办法让缩略图居中？看起来右边偏离了大约 25px。

Answer 1

删除浮动，改为设置为内联块。

给左边 10px 和右边 10px 的边距，而不是右边的 20px。

发件人：

#portfolio li {
  display: block;
  float: left;
  width: 30%;
  max-width: 400px;
  margin-right: 20px;
  margin-bottom: 20px;
}

收件人：

#portfolio li {
  display: inline-block;
  float: none;
  width: 30%;
  max-width: 400px;
  margin-right: 10px;
  margin-bottom: 20px;
  margin-left: 10px;
}

响应式灯箱不居中内容

Responsive Lightbox not centering content

css

center