Question

我正在创建一个员工列表，他们的照片采用网格格式（5宽）。随着员工数量的波动，我需要能够将不填充整行的浮动元素居中，而不是每行都使用包含div。我真的觉得我不太可能是第一个想要做到这一点并且正在努力的人，但我发现的每个解决方案都是创建一个容器，或者有人建议inline-block解决方案，但是这些图像需要齐平，并且因为它们在某些浏览器上% width，所以它们之间可以看到一些空间，即使使用margin-right: -4px解决方案也是如此;这就是我依赖花车的原因。谢谢！

我有什么

http://pasteboard.co/1u9iCIRy.jpg

我想要什么

http://pasteboard.co/1u9lKgCh.jpg

Answer 1

您可以使用flexbox和justify-content: center。并且是灵活容器的固定width。

以下是固定5列布局的概念验证：http://jsbin.com/hegogigiyo/1/edit?html,css,output。

你可以看到10幅图像的布局，11幅图像...... 15幅图像。

Answer 2

如果您不想要它们之间的空格，只需在使用font-size: 0; text-align: center;图片时为其父容器inline-block提供。

＆＃13;

.imagecontainer {
  font-size: 0;
  text-align: center;
}

.imagecontainer img {
  display: inline-block;
}

＆＃13;

<div class="imagecontainer">
  <img src="http://placehold.it/200x300" alt="" /> 
  <img src="http://placehold.it/200x300" alt="" /> 
  <img src="http://placehold.it/200x300" alt="" /> 
  <img src="http://placehold.it/200x300" alt="" /> 
  <img src="http://placehold.it/200x300" alt="" /> 
  <img src="http://placehold.it/200x300" alt="" /> 
  <img src="http://placehold.it/200x300" alt="" /> 
  <img src="http://placehold.it/200x300" alt="" /> 
  <img src="http://placehold.it/200x300" alt="" /> 
  <img src="http://placehold.it/200x300" alt="" /> 
  <img src="http://placehold.it/200x300" alt="" /> 
  <img src="http://placehold.it/200x300" alt="" /> 
  <img src="http://placehold.it/200x300" alt="" /> 
  <img src="http://placehold.it/200x300" alt="" /> 
  <img src="http://placehold.it/200x300" alt="" /> 
  <img src="http://placehold.it/200x300" alt="" /> 
  <img src="http://placehold.it/200x300" alt="" /> 
  <img src="http://placehold.it/200x300" alt="" /> 
  <img src="http://placehold.it/200x300" alt="" /> 
  <img src="http://placehold.it/200x300" alt="" /> 
</div>

＆＃13;

http://codepen.io/anon/pen/LZpGbZ

中心未知（响应）浮动的图像数量

2 个答案: