Ist es möglich, Bilder so zu positionieren (möglicherweise ohne Float)?

Question

Ich versuche Bilder in der folgenden Art und Weise von links beginnend zu positionieren nach rechts und es auch in der Mitte des Bildschirms halten:

Allerdings habe ich es nicht, dass stattdessen das letzte Bild immer zu tun bekommen erscheint in der Mitte der Reihe, wie im Bild unten:

gibt es eine Möglichkeit, um sie anzuzeigen so sein kann, aber es auch im CENTER des Bildschirms zu halten?

Ich bin mit display: inline-block in #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>&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

Ich fand es heraus. Es scheint, dass die Bilder unterschiedlich groß waren und daher nicht von links nach rechts richtig schweben konnten.

Fixed durch Hinzufügen explizite Höhe zu den Bildern

Answer 2

Sie die ganze 4 Bilder Sache in einem Container in diesem Container, dann setzen konnte man die Fotos mit einer bestimmten Menge von Pixeln von uns initialisieren kann, dann soll es geschehen!

Answer 3

Mit ihr ist ein Update für Ihre fiddle Flexbox konnte ich die Anzeigetabelle auf #gallery entfernt haben im Display flex hinzugefügt (Standard Reihe) und hat einen Wrap

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

EDIT # 1

Ich habe den Geige Link aktualisiert, es ist ein bisschen eine schmutzige Lösung, aber hoffentlich wird es einige Ideen auslösen. Die einzige Sache, die zu beachten ist, ist, dass, wenn Sie nach reaktionsfähigem Design suchen, Sie die Logik auf einer Fenstergrößenänderung ausführen müssen. Deshalb denke ich nicht, dass dies die perfekte Lösung ist.