我该如何中心包装为psd？

Question

我想将我的包装居中放置为psd，但我想在更大的屏幕上看到它，可能为2000px。我试着用margin: 0 auto, margin: 0 auto 0 auto;，但它didndt工作我该如何解决这个问题？这是我到目前为止。

HTML

<div class="feacture_wrap"> 
       <table> 
        <tr> 
        <td> 
         <div class="square"> 
          <img src="img/check.png" alt=""> 
          <div class="container_text"> 
           <h2>Lorem ipsum dolor sit amet consectetuer adipiscing elit.</h2> 
           <p>Lorem ipsum dolor sit amet consectetuer adipiscing elit. Aenean commodo ligula <span>eget dolor Aenean massas</span></p> 
          </div> 
         </div> 
        </td> 
        <td> 
         <div class="square"> 
          <img src="img/check.png" alt=""> 
          <div class="container_text"> 
           <h2>Lorem ipsum dolor sit amet consectetuer adipiscing elit.</h2> 
           <p>Lorem ipsum dolor sit amet consectetuer adipiscing elit. Aenean commodo ligula <span>eget dolor Aenean massas</span></p> 
          </div> 
         </div> 
        </td> 
        </tr> 
        <tr> 
        <td> 
         <div class="square"> 
          <img src="img/check.png" alt=""> 
          <div class="container_text"> 
           <h2>Lorem ipsum dolor sit amet consectetuer adipiscing elit.</h2> 
           <p>Lorem ipsum dolor sit amet consectetuer adipiscing elit. Aenean commodo ligula <span>eget dolor Aenean massas</span></p> 
          </div> 
         </div> 
        </td> 
        <td> 
         <div class="square"> 
          <img src="img/check.png" alt=""> 
          <div class="container_text"> 
           <h2>Lorem ipsum dolor sit amet consectetuer adipiscing elit.</h2> 
           <p>Lorem ipsum dolor sit amet consectetuer adipiscing elit. Aenean commodo ligula <span>eget dolor Aenean massas</span></p> 
          </div> 
         </div> 
        </td> 
        </tr> 
       </table> 
      </div> 

CSS

.wrapper, 
.blog_wrap, 
.feacture_wrap, 
.display_wrap 
.wrap_porcentaje{ 
    display: table; 
    width: 100%; 
    table-layout: fixed; 
    border-spacing: 10px; 
} 

.feacture_wrap{ 
    display:inline-block; 
    float:left; 
    color:#fff; 
    font-size:40px; 
} 

.square { 
    width: 600px; 
    height: 100px; 
    display: inline-block; 
} 


.square img { 
    width: 10%; 
} 

.container_text { 
    position: absolute; 
    font-size: 10px; 
    margin-top: -50px; 
    margin-left: 350px; 
} 

.container_text h2{ 
    font-family: 'Montserrat Black'; 
    color: #505a78; 
} 

.container_text p{ 
    font-size: 1em; 
} 

wrap_psd me_wrap

Answer 1

而不是使用一个table布局的，您可能需要使用Flexbox。

更改每个td S的div S和取出table和tr S，并且将其添加到父容器：

.feacture_wrap { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
} 

这将使你的物品赞同，必要时包裹，并水平居中。如果你想让它们垂直对齐，你可以使用align-items。

Answer 2

* { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: center; 
 
} 
 

 
.item { 
 
    padding: 10px; 
 
}

<div class="container"> 
 
    <div class="item"> 
 
    <img src="http://beerhold.it/310/250"> 
 
    <h2>Lorem</h2> 
 
    <p>Lorem ipsum</p> 
 
    </div> 
 
    <div class="item"> 
 
    <img src="http://beerhold.it/310/250"> 
 
    <h2>Lorem</h2> 
 
    <p>Lorem ipsum</p> 
 
    </div> 
 
    <div class="item"> 
 
    <img src="http://beerhold.it/310/250"> 
 
    <h2>Lorem</h2> 
 
    <p>Lorem ipsum</p> 
 
    </div> 
 
    <div class="item"> 
 
    <img src="http://beerhold.it/310/250"> 
 
    <h2>Lorem</h2> 
 
    <p>Lorem ipsum</p> 
 
    </div> 
 
    <div class="item"> 
 
    <img src="http://beerhold.it/310/250"> 
 
    <h2>Lorem</h2> 
 
    <p>Lorem ipsum</p> 
 
    </div> 
 
    <div class="item"> 
 
    <img src="http://beerhold.it/310/250"> 
 
    <h2>Lorem</h2> 
 
    <p>Lorem ipsum</p> 
 
    </div> 
 
    <div class="item"> 
 
    <img src="http://beerhold.it/310/250"> 
 
    <h2>Lorem</h2> 
 
    <p>Lorem ipsum</p> 
 
    </div> 
 
    <div class="item"> 
 
    <img src="http://beerhold.it/310/250"> 
 
    <h2>Lorem</h2> 
 
    <p>Lorem ipsum</p> 
 
    </div> 
 
</div>