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, where

Solution 1:

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

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

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

.rightyimg {
  max-width: 100px;
}

<sectionclass="power-of-egg"><divclass="row pull-down"><divclass="center-class"><divclass="righty"><imgsrc="http://www.psdgraphics.com/file/white-egg.jpg"><divclass="con"><h2>This is an egg.</h2><h5class="vid-open">eggs are very nutritious<spanclass="icon-right-left-01-011" ></span></h5></div></div></div></div></section>

Updated Codepen

Solution 2:

Well, this will center the entire block:

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

.righty {
  width: 300px;
  margin: 0 auto;
}

Solution 3:

The problem is that you've got your image inside of a div and div is a block-level element, which means it will expand to be the full width of its parent element.

If you take the image out of the div and make the div that contains the text have:

display:inline-block;

That div will shrink down to be only as wide as its content.

Here's your updated code: http://codepen.io/anon/pen/LNNJRQ

Solution 4:

To horizontally center an element you can use display: block; and margin: auto;. There may be a better approach but this is the css I used to have the image in the center and the text to the right of it:

.righty > .con {
  position: absolute;
  top:0;
  left: 55%;
}

.rightyimg {
  display: block;
  vertical-align: middle;
  margin: auto;
  max-width: 100px;
}

Note: the position of the class .con will vary based on screen size.

Here is the updated codepen.