缩小视口时如何居中图像?

Question

所以我在一个flexbox中包含三个图像。它完美居中，但是一旦我将视口向下缩小，图像似乎就会粘在左侧并且不会自动居中。弹性框的示例显示调整图像大小以适应屏幕，我不太知道我哪里出错了。

https://codepen.io/sblocks/pen/MXaRwd

<div class="services">
<div class="three">
<ul class="hover">
<li>
<img src="img/pictures/landing/1.jpg" alt="landscape">
<h2>Landscaping</h2>
<span class="h1"></span>
<span class="h2"></span>
<span class="h3"></span>
</li>
<li>
<img src="img/pictures/landing/3.jpg" alt="tree">
<h2>Tree Services</h2>
<span class="h1"></span>
<span class="h2"></span>
<span class="h3"></span>
</li>
<li>
<img src="img/pictures/landing/2.jpg" alt="plow">
<h2>Storm Cleanup</h2>
<span class="h1"></span>
<span class="h2"></span>
<span class="h3"></span>
</li>
</ul>
</div>

.services {
width: 100%;
height: 100vh;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
background-color: #2e2e2e;
}
.three {
max-width: 950px;
margin: auto;
width: 100%;
display: table;
margin-top: 25vh;
}
.three:after {
content: "";
clear: both;
}
.hover {
margin: 0;
padding: 0;
list-style-type: none;
}
.hover li {
position: relative;
max-width: 293px;
background-color: #4f4f4f;
width: 100%;
height: 400px;
margin: 10px;
float: left;
overflow: hidden;
cursor: pointer;
background-position: center;
}
.h1,
.h2,
.h3 {
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 135px;
background-color: #c5ddb5;
transition-duration: 0.8s;
}
.h2 {
top: 133px;
width: 100%;
left: 293px;
background-color: #68d793;
transition-duration: 0.8s;
}
.h3 {
top: 266px;
transition-duration: 0.8s;
}
.hover li:hover .h1,
.hover li:hover .h3 {
width: 100%;
}
.hover li:hover .h2 {
left: 0;
}
.hover li h2 {
position: absolute;
top: 187px;
color: #fff;
text-transform: uppercase;
font-size: 25px;
z-index: 1;
left: -110px;
transform: translate(-50%);
width: 134px;
letter-spacing: 1px;
transition-duration: 1.5s;
}
.hover li:hover h2 {
left: 50%;
}

Answer 1

如何在 UL 元素内居中列出项目？

您需要使用display:inline-block而不是float:left(显然，您必须将text-align:center添加到容器中(