调整浏览器大小时，使文字与图像保持中心

Question

我无法让我的文字与旁边的图像保持垂直居中并随着浏览器大小的调整而增大和缩小。 在调整浏览器大小时，我希望div顶部和底部之间的填充相同。

HTML：

 <div id='panel-1'>
    <div class='row'>
      <div class='col-md-5'>
        <div class='text-left'>
          <h1>
            Unlimited Drafts
          </h1>
          <h3>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.
          </h3>
        </div>
      </div>
      <div class='col-md-7'>
        <img alt="Drafts3" src="/assets/Drafts3.gif" width="100%" />
      </div>
    </div>

CSS：

#panel-1 .col-md-7 {
  padding-right: 0px!important;
}

#panel-1 .col-md-7 img {
   border-left: 6px solid #a193b6;
   border-top: 6px solid #a193b6;
   border-bottom: 6px solid #a193b6;
   margin-top: 30px;
  margin-bottom: 30px;
}

#panel-1 .col-md-5 h1 {
  padding-top: 130px;
  margin-top:auto;
  margin-bottom:auto;
}

#panel-1 {
  height: 300px auto;
  background-color: #c9b8e3;
}

#panel-1 h1 {
  font-size: 2.2vw;
  color: white!important;
  font-weight: bold;
  font-family: 'Montserrat', sans-serif!important;
}

#panel-1 h3 {
  font-size: 1.6vw;
  font-family: 'Raleway', sans-serif!important;
  color: white!important;
  font-weight: bold;

 }

这是演示http://www.bootply.com/PMNE8IjTcZ

Answer 1

从内部组件中删除边距（顶部和底部），仅将margin-top / margin-bottom添加到包含它们的div中。

#panel-1 .col-md-7 {
  padding-right: 0px!important;
}

#panel-1 .col-md-7 img {
  border-left: 6px solid #a193b6;
  border-top: 6px solid #a193b6;
  border-bottom: 6px solid #a193b6;
}

#panel-1 .col-md-5 h1 {
    margin-top:0;
    margin-bottom:0;

}

#panel-1 {
  height: 300px;
  background-color: #c9b8e3;
  padding: 50px 0;
  box-sizing: content-box;
}

#panel-1 h1 {
  font-size: 2.2vw;
  color: white!important;
  font-weight: bold;
  font-family: 'Montserrat', sans-serif!important;
  margin-top: 0;
}

#panel-1 h3 {
  font-size: 1.6vw;
  font-family: 'Raleway', sans-serif!important;
  color: white!important;
  font-weight: bold;
  margin-bottom:0;

}

<div class="container">
<div id="panel-1">
        <div class="row">
          <div class="col-md-5">
            <div class="text-left">
              <h1>
                Unlimited Drafts
              </h1>
              <h3>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.
              </h3>
            </div>
          </div>
          <div class="col-md-7">
            <img alt="Drafts3" src="http://www.placehold.it/350x150" width="100%">
          </div>
        </div>
      </div>
</div>

在bootply中查看修改后的代码

Answer 2

如果您不使用浮点数，则可以真正真正地使两个同胞使用vertical-align:middle和display:inline-block彼此vertical-align:middle 。 同样，就像处理列一样，您可以设置宽度并仅在父级上使用float替代。

例

http://jsfiddle.net/43a7kj28/