Q:

center image next to two lines of text responsively

I am trying to display an image next to two lines of text, which are centered. I have attached an example, and you will see from it that the image is to the left of the text, whereas I am trying to center the image to be on the left side of the text, and have a perfectly centered image/text. 
CSS:
.center-class{
  text-align:center;
}
.righty img{
  max-width: 100px;
  float:left;
}
.vid-open{
}

HMTL:
<section class="">
  <div class="row pull-down">
    <div class="center-class">
      <div class="righty">
        <img src="http://www.psdgraphics.com/file/white-egg.jpg" >
        <h2>This is a header.</h2>
        <h5 class="vid-open">some text some text some text<span class="icon-right-left-01-011" ></span></h5>
      </div>
    </div>
  </div>
</section>

SEE DEMO

A:

Simply wrap the text in a div and display it inline-block:

.center-class {
  text-align: center;
}

.righty > * {
  display: inline-block;
  vertical-align: middle;
}

.righty img {
  max-width: 100px;
}
<section class="power-of-egg">
  <div class="row pull-down">
    <div class="center-class">
      <div class="righty">
        <img src="http://www.psdgraphics.com/file/white-egg.jpg">
        <div class="con">
          <h2>This is an egg.</h2>
          <h5 class="vid-open">eggs are very nutritious<span class="icon-right-left-01-011" ></span></h5>
        </div>
      </div>
    </div>
  </div>
</section>

Updated Codepen

