-1
我試圖從左起通過以下方式來定位圖片向右，並保持它在屏幕的中心：圖像可能像這樣（可能沒有浮動）？
但是，我不能讓它這樣做，而不是最後的圖像總是出現在該行的中心像下面的圖片中：
有沒有一種方法，以便能夠顯示它這樣的，但也保持在屏幕的CENTER？
我使用顯示：內聯塊在#gallery> DIV
CODE：https://jsfiddle.net/m9xuj8aa/
HTML：
<div class="container">
<header>
<div id="logo">
<img src="" alt="">
</div>
<nav class="cl-effect-21">
<ul>
<li>
<a href="index.html" class="scroll">
<span data-hover="Home">Home</span>
</a>
</li>
<li>
<a href="#about" class="scroll">
<span data-hover="About Us">About Us</span>
</a>
</li>
<li>
<a href="#services" class="scroll">
<span data-hover="Services">Services</span>
</a>
</li>
<li>
<a href="Portfolio.html" class="scroll">
<span data-hover="Portfolio">Portfolio</span>
</a>
</li>
<li>
<a href="#testimonials" class="scroll">
<span data-hover="Testimonials">Testimonials</span>
</a>
</li>
<li>
<a href="Contact.html" class="scroll active">
<span data-hover="Contact Us">Contact Us</span>
</a>
</li>
</ul>
</nav>
</header>
<div class="portfolio clearfix">
<div id="gallery">
<div id="img-wrapper">
<a href="assets/images/DesiGotTalent3/1.jpg">
<img src="assets/images/DesiGotTalent3/1.jpg" alt="">
<div id="overlay">
<h1 class="fa fa-search"></h1>
</div>
</a>
</div>
<div id="img-wrapper">
<a href="assets/images/DesiGotTalent3/2.jpg">
<img src="assets/images/DesiGotTalent3/2.jpg" alt="">
<div id="overlay">
<h1 class="fa fa-search"></h1>
</div>
</a>
</div>
<div id="img-wrapper">
<a href="assets/images/DesiGotTalent3/3.jpg">
<img src="assets/images/DesiGotTalent3/3.jpg" alt="">
<div id="overlay">
<h1 class="fa fa-search"></h1>
</div>
</a>
</div>
<div id="img-wrapper">
<a href="assets/images/DesiGotTalent3/4.jpg">
<img src="assets/images/DesiGotTalent3/4.jpg" alt="">
<div id="overlay">
<h1 class="fa fa-search"></h1>
</div>
</a>
</div>
<div id="img-wrapper">
<a href="assets/images/DesiGotTalent3/5.jpg">
<img src="assets/images/DesiGotTalent3/5.jpg" alt="">
<div id="overlay">
<h1 class="fa fa-search"></h1>
</div>
</a>
</div>
<div id="img-wrapper">
<a href="assets/images/DesiGotTalent3/6.jpg">
<img src="assets/images/DesiGotTalent3/6.jpg" alt="">
<div id="overlay">
<h1 class="fa fa-search"></h1>
</div>
</a>
</div>
<div id="img-wrapper">
<a href="assets/images/DesiGotTalent3/7.jpg">
<img src="assets/images/DesiGotTalent3/7.jpg" alt="">
<div id="overlay">
<h1 class="fa fa-search"></h1>
</div>
</a>
</div>
<div id="img-wrapper">
<a href="assets/images/DesiGotTalent3/8.jpg">
<img src="assets/images/DesiGotTalent3/8.jpg" alt="">
<div id="overlay">
<h1 class="fa fa-search"></h1>
</div>
</a>
</div>
<div id="img-wrapper" class="last">
<a href="assets/images/DesiGotTalent3/9.jpg">
<img src="assets/images/DesiGotTalent3/9.jpg" alt="">
<div id="overlay">
<h1 class="fa fa-search"></h1>
</div>
</a>
</div>
</div>
</div>
<div class="push"></div>
</div>
<footer>
<div id="social">
<span class="fa fa-facebook"></span>
<span class="fa fa-instagram"></span>
<span class="fa fa-vimeo"></span>
<span class="fa fa-youtube"></span>
</div>
<h3>© 2016 Dinesh Joshi Photography</h3>
</footer>
CSS：
/** External Stylesheet **/
* { margin: 0; }
html, body { height: 100%; }
.container {
min-height: 100%;
margin: 0 auto -60px;
}
footer, .push {
height: 20px;
padding: 20px 0px;
}
footer {
font-size: 10px;
text-align: center;
}
#social {
margin-bottom: 5px;
}
#social span {
border: 1px solid rgba(0,0,0,.2);
margin: 0px 3px;
font-size: 1.6em;
width: 1.6em;
text-align: center;
line-height: 1.6em;
background: #D4AF37;
color: white;
border-radius: 50%;
}
/** Header **/
header {
padding-top: 30px;
}
ul {
text-align: center;
}
ul li {
display: inline-block;
font-family: 'Roboto', sans-serif;
text-transform: uppercase;
font-size: 12px;
letter-spacing: 1px;
margin: 0px 8px;
}
nav a {
position: relative;
display: inline-block;
outline: none;
color: black;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 400;
text-shadow: 0 0 1px rgba(255,255,255,0.3);
font-size: 12px;
font-family: 'Roboto', sans-serif;
}
nav a:hover,
nav a:focus {
outline: none;
}
/* Effect 21: borders slight translate */
.cl-effect-21 a {
padding: 10px;
color: black;
font-weight: 400;
text-shadow: none;
-webkit-transition: color 0.3s;
-moz-transition: color 0.3s;
transition: color 0.3s;
}
.cl-effect-21 a::before,
.cl-effect-21 a::after {
position: absolute;
left: 0;
width: 100%;
height: 1.2px;
background: #D4AF37;
content: '';
opacity: 0;
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
-moz-transition: opacity 0.3s, -moz-transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
-webkit-transform: translateY(-10px);
-moz-transform: translateY(-10px);
transform: translateY(-10px);
}
.active {
border-top: 1.2px solid #D4A347;
border-bottom: 1.2px solid #D4A347;
}
.cl-effect-21 a::before {
top: 0;
-webkit-transform: translateY(-10px);
-moz-transform: translateY(-10px);
transform: translateY(-10px);
}
.cl-effect-21 a::after {
bottom: 0;
-webkit-transform: translateY(10px);
-moz-transform: translateY(10px);
transform: translateY(10px);
}
.cl-effect-21 a:hover::before,
.cl-effect-21 a:focus::before,
.cl-effect-21 a:hover::after,
.cl-effect-21 a:focus::after {
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
transform: translateY(0px);
}
/* End of external stylesheet */
.portfolio {
width: 100%;
margin:0 auto;
}
#gallery {
width: 100%;
margin:0 auto;
padding: 0px 10px;
display: table;
text-align: center;
}
#gallery img {
width: 100%;
height: auto;
}
#gallery > div {
width: 150px;
height: 140px;
display:inline-block;
vertical-align:top;
background-color:black;
margin: 5px;
}
#gallery a div {
position:absolute;
width: 150px;
margin:0 auto;
text-align: center;
top: 0;
right:0;
left:0;
bottom:0;
z-index: 1;
transform: translate(-110%, 0);
-webkit-transition: all .3s ease-in-out;
display:none;
}
#gallery a:hover #overlay {
background-color:rgba(212, 175, 55, .3);
transform: translate(0,0);
}
#gallery div:nth-of-type(9) {
text-align: left;
}
#gallery h1 {
font-size: 20px;
color:white;
margin:3.6em 0px;
}
.clearfix {
clear: both;
}
咦固定的，我已經看到了*確切同樣的問題*一個小時前，但你已經刪除了它。你爲什麼重新發布這個問題？ – nicael
**從不**有2個完全相同的ID – Li357
[Flexbox填充行並確定每行子元素數量]的可能副本（http://stackoverflow.com/questions/32774178/flexbox-to-fill-out-行和確定的孩子每行） – BSMP