0
我正在試圖使圖像中心在頁面上，並有均勻的空間。當我最小化移動視圖的頁面時，圖像會左移，右側有一個巨大的空白區域。任何人都知道這是什麼原因以及如何解決這個問題？如何均勻地自動居中放置圖像？
.portfolio {
color: #333333;
background: #f7f7f7;
}
.portfolio h2 {
padding-top: 50px;
text-align: center;
margin: 0 auto;
}
.portfolio p {
text-align: center;
margin-bottom: 0;
line-height: 1.5em;
padding-bottom: 30px;
}
hr {
width: 10%;
margin-bottom: 50px;
}
.card-module {
display: inline-block;
width: 33%;
margin-bottom: 30px;
}
.card-content {
position: relative;
margin: 0 auto;
max-width: 90%;
}
.card-content .content-overlay {
background: rgba(0, 0, 0, 0.7);
position: absolute;
height: 98%;
left: 0;
top: 0;
bottom: 0;
right: 0;
opacity: 0;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.card-content:hover .content-overlay {
opacity: 1;
}
.card-content,
.content-overlay,
.content-image,
.content-details {
width: 100%;
}
.content-details {
position: absolute;
text-align: center;
top: 50%;
left: 50%;
opacity: 0;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.card-content:hover .content-details {
top: 57%;
left: 50%;
opacity: 1;
}
.content-details h3 {
color: #fff;
font-weight: 500;
font-size: 1.52vw;
letter-spacing: 0.15em;
margin-bottom: 0.5em;
text-transform: uppercase;
}
.content-details p {
color: #fff;
font-size: 0.8em;
font-size: 1.2vw;
}
.fadeIn-bottom {
top: 80%;
}<section class="work" id="work">
<div class="portfolio">
<h2>Work</h2>
<p>
brief description <br> here
</p>
<hr>
<div class="card-module">
<div class="card-content">
<div class="content-overlay"></div>
<img class="content-image" src="http://i.imgur.com/VcoiK3q.jpg">
<div class="content-details fadeIn-bottom">
<h3 class="content-title">Arsenal Fanpage</h3>
<p class="content-text">As a highschool project, I made a soccer club fanpage website.</p>
</div>
</div>
</div>
<div class="card-module">
<div class="card-content">
<div class="content-overlay"></div>
<img class="content-image" src="http://i.imgur.com/VcoiK3q.jpg">
<div class="content-details fadeIn-bottom">
<h3 class="content-title">Coding Website Beta</h3>
<p class="content-text">This was a beta website created to display all my high school work.</p>
</div>
</div>
</div>
<div class="card-module">
<div class="card-content">
<div class="content-overlay"></div>
<img class="content-image" src="http://i.imgur.com/VcoiK3q.jpg">
<div class="content-details fadeIn-bottom">
<h3 class="content-title">Coding Website Launch</h3>
<p class="content-text">This was the official look of my portfolio website when released for all to see.</p>
</div>
</div>
</div>
<div class="card-module">
<div class="card-content">
<div class="content-overlay"></div>
<img class="content-image" src="http://i.imgur.com/VcoiK3q.jpg">
<div class="content-details fadeIn-bottom">
<h3 class="content-title">Website Resume</h3>
<p class="content-text">This is my website resume created from scratch.</p>
</div>
</div>
</div>
<div class="card-module">
<div class="card-content">
<a href="https://www.youtube.com/watch?v=i0eYyobCkGo" target="_blank">
<div class="content-overlay"></div>
<img class="content-image" src="http://i.imgur.com/VcoiK3q.jpg">
<div class="content-details fadeIn-bottom">
<h3 class="content-title">Yotube Intro</h3>
<p class="content-text">Created using Adobe After Effects and Adobe Premiere Pro</p>
</div>
</a>
</div>
</div>
<div class="card-module">
<div class="card-content">
<a href="https://www.youtube.com/watch?v=UqDKgLVrO1c&feature=youtu.be" target="_blank">
<div class="content-overlay"></div>
<img class="content-image" src="http://i.imgur.com/VcoiK3q.jpg">
<div class="content-details fadeIn-bottom">
<h3 class="content-title">News Intro</h3>
<p class="content-text">College project news intro</p>
</div>
</a>
</div>
</div>
</div>
</section>
一個解決方案是使用一個JS軟件包（如masonry）（https://masonry.desandro.com/）並讓它處理響應。 – joym8