html - 响应式地在两行文本旁边居中图像

Question

我试图在居中的两行文本旁边显示图像。我附上了一个示例，您会从中看到图像位于文本的左侧，而我试图将图像居中放置在文本的左侧，并使图像/文本完美居中。

CSS:

.center-class{
  text-align:center;
}
.righty img{
  max-width: 100px;
  float:left;
}
.vid-open{
}

HTML:

<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

Answer 1

简单地将文本包裹在一个div中并显示它 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