Question

我已动态生成缩略图，这些缩略图将插入流体宽度的容器中。缩略图的宽度/高度设置为150px，边距为5px。我希望瓷砖在容器内水平居中，但我希望每个瓷砖在彼此下方排列以形成网格。

我编写了以下代码，但我无法将缩略图置于容器中心。如果我删除float:left;，缩略图将居中，但缩略图不再排列在彼此之下以形成网格。

如何修改CSS以实现以流体宽度容器为中心的缩略图网格？

<div class="wrapper">
  <div class="thumb"><img src="http://www.placehold.it/150x150"></div>
  <div class="thumb"><img src="http://www.placehold.it/150x150"></div>
  <div class="thumb"><img src="http://www.placehold.it/150x150"></div>
  <div class="thumb"><img src="http://www.placehold.it/150x150"></div>
  <div class="thumb"><img src="http://www.placehold.it/150x150"></div>
</div>

.wrapper {
  width: 600px; /* responsive width */
  background: yellow;
  text-align: center;
  overflow: hidden;
}

.thumb {
  display: inline;
  float: left;
  margin: 0 5px 5px;
  width: 150px;
}

Answer 1

请用此代码替换.thumb

@Override
public void startActivityForResult(final Intent _intent, final int _requestCode) {
    FragmentManager fragmentManager = getActivity().getSupportFragmentManager();
    HackForResultFragment f = HackForResultFragment.newInstance(_requestCode,_intent);
    f.setCallingFragment(this);
    fragmentManager.beginTransaction().add(f, null).commit();
}

Answer 2

您可以使用一个子包装器，其宽度可以相对于主包装器设置，并将拇指浮动到子系统中，如下所示：

<div class="wrapper">
  <div class="subwrapper">
  <div class="thumb"><img src="http://www.placehold.it/150x150"></div>
  <div class="thumb"><img src="http://www.placehold.it/150x150"></div>
  <div class="thumb"><img src="http://www.placehold.it/150x150"></div>
  <div class="thumb"><img src="http://www.placehold.it/150x150"></div>
  <div class="thumb"><img src="http://www.placehold.it/150x150"></div>
</div>

.subwrapper {
  width: 480px;
  margin: auto;
}

https://jsfiddle.net/45sosd29/

在响应容器中居中缩略图网格

2 个答案: