在网格中的每列中居中图像答案

【问题标题】：Center images within each column in a grid在网格中的每列中居中图像
【发布时间】：2018-05-26 20:09:57
【问题描述】：

我正在使用 Isotope 在 Squarespace 上创建一个可过滤的画廊。我的一切工作正常，但我似乎无法将各个图像放在它们的列中。任何帮助都会很棒！

每张图片的来源如下所示，样式列在后面：

<ul class="list">
<li class="list__item cloud connectivity ucaas"><img src="*static url here"/></li> </ul>



ul {
margin-bottom: 1em;
margin: auto;
list-style: none;
display: flex;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
justify-content: space-between;
}
ul li {
flex: 0 0 auto;
text-align: center;
}

.list { 
margin: 0; 
padding: 0; 
list-style: none; 
}

.list__item {
display: inline-block; 
width: 100%; 
height: 12em;
overflow: hidden;
margin-bottom: 1em;
margin: auto;
text-align: center;
font-size: 1em; 
text-transform: uppercase;
color: white;
}

@media screen and (min-width: 600px) {
.list {
    display: flex;
    flex-wrap: wrap;
  margin: auto;
}
.list__item {
    width: calc(33% - 1em);  
}
@media screen and (min-width: 768px) {

button {
    margin: 0.5em; 
    padding: 0.5em; 
}

.list__item {                               
    width: calc(33% - 1em); 
}

}

【问题讨论】：

尝试将 align="center" 添加到图片标签

标签： css flexbox grid-layout jquery-isotope

【解决方案1】：

<ul class="list">
  <li class="list__item cloud connectivity ucaas">
  <div class="cont">

  <img src="http://www.pdfontanaliri.it/wp-content/uploads/2018/01/casa.jpg"/></div></li>
  <li class="list__item cloud connectivity ucaas">
  <div class="cont">
  <img src="http://www.pdfontanaliri.it/wp-content/uploads/2018/01/casa.jpg"/></div></li>
</ul>




.list__item {
width: 100%; 
height: 12em;
overflow: hidden;
margin-bottom: 1em;
margin: auto;
text-align: center;
font-size: 1em; 
text-transform: uppercase;
color: white;

display: flex;
justify-content: center;
align-items: center;
}

.cont {
  height: 50%;
  width: 50%;
  margin: 5px;
  border: 1px solid yellow;
}

【讨论】：