Keeping text center with image when resizing browser

Question

i'm having trouble getting my text to stay vertically centered with the image next to it and grow and shrink as the browser is resized. I want the padding between the top and bottom of the div to be the same when resizing the browser.

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;

 }

Heres a demo http://www.bootply.com/PMNE8IjTcZ

Answer 1

Remove the margins (tops and bottoms) from the inner components only add margin-top/margin-bottom to the div containing them both.

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

See your modified code in bootply

Answer 2

If you don't use floats, you can really simply keep both sibling vertically aligned with each other using vertical-align:middle and display:inline-block . Likewise as you are doing with columns, you can set a width and just use a float alternative on the parent.

EXAMPLE

http://jsfiddle.net/43a7kj28/