与paddings和被集中的文本的充分的高度背景图象

Question

如何附加这样的背景图像（仅限顶部，左侧，右侧）？我有这个标志和里面的主要文字，但我需要在顶部（没有填充）和主文本之间对齐徽标。这可能吗？

    <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

您可以使用display:inline-block和pseudo来实现此目标，

Source

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;