我該如何中心包裝爲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>