居中在div中的图像

Question

我创建了一个页面，其中包含我商店中每个类别的图像（拳击，武术，瑜伽等......）我需要将图像置于页面的中心，如果窗口是，则向下移动到不同的行压缩。我希望这是有道理的...

从绿色水平线可以看出，它们的图像没有居中（我不希望它们在一个在另一个上面的垂直线上，我喜欢它们现在彼此相邻的设置）。

我的代码是：

＆＃13;

＆＃13;

<style><!--
p {
padding:10px;
}
.img_collection {
width:252px;
height:167px;
}
img:hover {
    opacity: 0.5;
    filter: alpha(opacity=50);
}
.center {
width:100%;
margin:auto;
border:1px solid green;
}
--></style>
<div class="center">
<p style="float: left; text-align: center;"><a href="http://theactivitymart.com/collections/boxing"><img class="img_collection" src="//cdn.shopify.com/s/files/1/1712/9905/files/Boxing.jpg?v=1491336153" alt="" /></a><br /><a href="http://theactivitymart.com/collections/boxing">Boxing</a></p>
<p style="float: left; text-align: center;"><a href="http://theactivitymart.com/collections/fitness-equipment"><img class="img_collection" src="//cdn.shopify.com/s/files/1/1712/9905/files/Fitness_Equipment.jpg?v=1491336105" alt="" /></a><br /><a href="http://theactivitymart.com/collections/fitness-equipment">Fitness Equipment</a></p>
<p style="float: left; text-align: center;"><a href="http://theactivitymart.com/collections/gymnastics"><img class="img_collection" src="//cdn.shopify.com/s/files/1/1712/9905/files/Gymnastics.jpg?v=1491336578" alt="" /></a><br /><a href="http://theactivitymart.com/collections/gymnastics">Gymnastics</a></p>
<p style="float: left; text-align: center;"><a href="http://theactivitymart.com/collections/martial-arts"><img class="img_collection" src="//cdn.shopify.com/s/files/1/1712/9905/files/Martial_Arts.jpg?v=1491336138" alt="" /></a><br /><a href="http://theactivitymart.com/collections/martial-arts">Martial Arts</a></p>
<p style="float: left; text-align: center;"><a href="http://theactivitymart.com/collections/weight-lifting"><img class="img_collection" src="//cdn.shopify.com/s/files/1/1712/9905/files/Weight_Lifting.jpg?v=1491336597" alt="" /></a><br /><a href="http://theactivitymart.com/collections/weight-lifting">Weight Lifting</a></p>
<p style="float: left; text-align: center;"><a href="http://theactivitymart.com/collections/yoga"><img class="img_collection" src="//cdn.shopify.com/s/files/1/1712/9905/files/Yoga1.jpg?v=1491336562" alt="" /></a><br /><a href="http://theactivitymart.com/collections/yoga">Yoga</a></p>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

对于非Flexbox解决方案（即也与旧浏览器兼容），您可以将display: inline-block;分配给p元素，将text-align: center分配给其容器：

p {
  padding: 10px;
  display: inline-block;
}

.img_collection {
  width: 252px;
  height: 167px;
}

img:hover {
  opacity: 0.5;
  filter: alpha(opacity=50);
}

.center {
  width: 100%;
  margin: auto;
  border: 1px solid green;
  text-align: center;
}

<div class="center">
  <p>
    <a href="http://theactivitymart.com/collections/boxing"><img class="img_collection" src="//cdn.shopify.com/s/files/1/1712/9905/files/Boxing.jpg?v=1491336153" alt="" /></a><br /><a href="http://theactivitymart.com/collections/boxing">Boxing</a></p>
  <p>
    <a href="http://theactivitymart.com/collections/fitness-equipment"><img class="img_collection" src="//cdn.shopify.com/s/files/1/1712/9905/files/Fitness_Equipment.jpg?v=1491336105" alt="" /></a><br /><a href="http://theactivitymart.com/collections/fitness-equipment">Fitness Equipment</a></p>
  <p>
    <a href="http://theactivitymart.com/collections/gymnastics"><img class="img_collection" src="//cdn.shopify.com/s/files/1/1712/9905/files/Gymnastics.jpg?v=1491336578" alt="" /></a><br /><a href="http://theactivitymart.com/collections/gymnastics">Gymnastics</a></p>
  <p>
    <a href="http://theactivitymart.com/collections/martial-arts"><img class="img_collection" src="//cdn.shopify.com/s/files/1/1712/9905/files/Martial_Arts.jpg?v=1491336138" alt="" /></a><br /><a href="http://theactivitymart.com/collections/martial-arts">Martial Arts</a></p>
  <p>
    <a href="http://theactivitymart.com/collections/weight-lifting"><img class="img_collection" src="//cdn.shopify.com/s/files/1/1712/9905/files/Weight_Lifting.jpg?v=1491336597" alt="" /></a><br /><a href="http://theactivitymart.com/collections/weight-lifting">Weight Lifting</a></p>
  <p>
    <a href="http://theactivitymart.com/collections/yoga"><img class="img_collection" src="//cdn.shopify.com/s/files/1/1712/9905/files/Yoga1.jpg?v=1491336562" alt="" /></a><br /><a href="http://theactivitymart.com/collections/yoga">Yoga</a></p>
</div>

Answer 2

对于您的图片容器.center，您可以使用＆＃34; Flexbox＆＃34;这将允许您的项目居中，并在它们包裹在父项之外时移动到行：

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;

https://fiddle.jshell.net/830kqqxv/

你可以看看这个小提琴来看看＆＃34;黑客攻击＆＃34;一起拆分flexbox网格，它将为您提供4x2网格，但随后将其换入3x1x2网格。

https://fiddle.jshell.net/o2xr8cax/