パディングと中央揃えのテキストを使用した完全な高さの背景画像

Question

パディングを使用して背景画像を（上部、左、右のみ）に添付する方法を教えてください。私はこのロゴとその内部のメインテキストを持っていますが、上部（パディングなし）とメインテキストの中間にロゴを揃える必要があります。これは可能ですか？あなたはこれを達成するためにdisplay:inline-blockとpseudoを使用することができます

<div class="t-row"> 
     <div class="image-wrapper"> 
     <div class="canvas-image"> 
      <div class="logo-container"> 
      <img src="img/logo2x.png" alt="Logo"> 
      </div> 
      <div class="content"> 
       TEXT HERE 
      </div> 
     </div> 
     </div> 
    </div> 
    <div class="t-row"> 
     <div class="footer-text"> 
     <div class="footer-cell"> 
      TEXT HERE 
     </div> 
     </div> 
    </div> 


html { 
    height:100%; 
} 
body { 
    min-height:100%; 
} 
.t-row:first-child { 
    height: 81.5%; 
    padding: 17px 17px 0 17px; 
} 
.image-wrapper { 
    height: 100%; 
    background-image: url(../img/background-phone.png); 
    background-size: cover; 
    background-repeat: no-repeat; 
} 

Answer 1

、

Source

html,body{ 
 
    margin:0; 
 
    padding:0; 
 
} 
 
.wrapper { 
 
    text-align: center; 
 
    background: url('http://www.hutterites.org/wp-content/uploads/2012/03/placeholder.jpg'); 
 
    background-size: cover; 
 
    height:100vh; 
 
} 
 
.wrapper:before { 
 
    content: ''; 
 
    display: inline-block; 
 
    height: 100%; 
 
    vertical-align: middle; 
 
} 
 
.childDiv { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 
.logo, 
 
.text{ 
 
    width:400px; 
 
    padding: 10px 15px; 
 
    margin: 30px 0; 
 
    background: #fff; 
 
} 
 
.text{ 
 
    height:100px; 
 
}

<div class="wrapper"> 
 
    <div class="childDiv"> 
 
    <div class="logo">logo</div> 
 
    <div class="text">text</div> 
 
    </div> 
 
</div>