Question

我想把我的包装作为psd的中心，但我希望在更大的屏幕上看到它可能是2000px加上。我尝试使用margin: 0 auto, margin: 0 auto 0 auto;，但它没有用，我怎么能解决这个问题呢？这是我到目前为止所得到的。

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

您可能希望使用Flexbox。

，而不是使用table布局

将每个td更改为div并取出table和tr，然后将其添加到父容器中：

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

这将允许您的项目自己对齐，在需要时换行，并水平居中。如果您希望它们垂直对齐，您可以使用align-items。

Answer 2

＆＃13;

* {
  padding: 0;
  margin: 0;
}

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.item {
  padding: 10px;
}

＆＃13;

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

＆＃13;

我如何将中心换行作为psd？

2 个答案: