Возможно ли позиционирование изображений таким образом (возможно, без поплавка)?

Question

Я пытаюсь расположить изображения следующим образом, начиная с слева направо, а также держать его в центре экрана:

Однако, я не могу заставить его сделать это вместо того, чтобы последний образ всегда появляется в центре ряда, как на картинке ниже:

есть ли способ, чтобы иметь возможность отображать это так, но и сохранить его в CENTER экрана?

Я использую дисплей: встроенный блок в #gallery> Div

КОД: 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>&copy; 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; 
      } 

Answer 1

Я понял. Кажется, что изображения были разных размеров и поэтому не могли плавать слева направо.

Исправлено добавлением явной высоты к изображениям

Answer 2

Вы можете поместить все 4 изображения вещь в контейнере, то в этом контейнере можно инициализировать фотографии с определенным количеством пикселов Афоризм, то это должно быть сделано!

Answer 3

Вы можете использовать Flexbox ее это обновление для вашего fiddle я удалил дисплей таблица на #gallery добавлена ​​дисплей прогибается (по умолчанию строка) и добавила обертку

#gallery { 
      display: flex; 
      flex-wrap: wrap; 
      width: 100%; 
      margin:0 auto; 
      padding: 0px 10px; 
      text-align: center; 
     } 

EDIT # 1

Я обновил ссылку на скрипку, это немного грязное исправление, но, надеюсь, оно зажжет некоторые идеи. Единственное, что нужно отметить, это то, что если вы ищете отзывчивый дизайн, вам придется выполнять логику при изменении размера окна. Вот почему я не думаю, что это идеальное решение.