图像可能像这样（可能没有浮动）？

问题描述：

我试图从左起通过以下方式来定位图片向右，并保持它在屏幕的中心：图像可能像这样（可能没有浮动）？

但是，我不能让它这样做，而不是最后的图像总是出现在该行的中心像下面的图片中：

有没有一种方法，以便能够显示它这样的，但也保持在屏幕的CENTER？

我使用显示：内联块在#gallery> DIV

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; 
      }

咦固定的，我已经看到了*确切同样的问题*一个小时前，但你已经删除了它。你为什么重新发布这个问题？ – nicael

**从不**有2个完全相同的ID – Li357

[Flexbox填充行并确定每行子元素数量]的可能副本（http://*.com/questions/32774178/flexbox-to-fill-out-行和确定的孩子每行） – BSMP

答

我想通了。看起来图像大小不同，因此无法正确地从左到右漂浮。

加入明确的高度与图像

答

你可以把整个4张图像的东西在一个容器中，然后在容器可以初始化带有一定量的海誓山盟像素的照片，那么它应该做的事！

答

你可以使用Flexbox的她是更新了自己的fiddle我已经去除了在显示器挠性加在#gallery显示表（默认为行）并增加了一个包裹

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

编辑＃1

我已经更新了小提琴链接，这是一个肮脏的修复，但希望它会引发一些想法。唯一要注意的是，如果你正在寻找响应式设计，你将不得不在窗口大小上执行逻辑。这就是为什么我不认为这是完美的解决方案。

这不是和Float做类似的事吗？它部分是我想要的，但是整组图像不在屏幕的中心，它们更靠左。我想要的是以一切为中心，最后一个图像（在第三行）从左边开始 – RandomMath

图像可能像这样（可能没有浮动）？

相关推荐