2017-02-20 4 views
0

私はPSDとしてラップを中心にしたいと思っていますが、私はおそらく2000px以上の大きな画面でそれを見たいと思っています。 margin: 0 auto, margin: 0 auto 0 auto;で試しましたが、この問題を解決する方法はありませんでしたか?これは私がこれまでに得たものです。どのようにPSDとしてラップをセンターすることができますか?

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

+0

レイアウトにテーブルを使用しないでください。表形式データ用の表を使用します。レイアウトにはCSSを使用します。 – j08691

答えて

1

代わりのtableレイアウトを使用して、あなたはFlexboxを使用する場合があります。

変更divtd秒のそれぞれとtabletr Sを取り出して、親コンテナにこれを追加します。

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

これは、必要なときにラップし、あなたのアイテムが自分自身を整列させることができます、水平にセンタリングされます。それらを垂直に整列させたい場合は、align-itemsを使用することができます。

0

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

関連する問題