title: Aligning content alongside an image
body: <p>I'm trying to position text vertically centered next to an image.</p>
  
  <p>At the same time I don't want the text to overflow outside the vertical bounds of the image.</p>
  
  <p>Struggling. Are there any best practices or tips?</p>
  
  <p>Here's the HTML:</p>
  
  <pre><code>&lt;div id="storiesblock"&gt;
    &lt;p&gt;&lt;a href="#"&gt;&lt;img src="http://dummyimage.com/92x64/000000/fff"&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. &lt;/a&gt;
  
  &lt;p&gt;&lt;a href="#"&gt;&lt;img src="http://dummyimage.com/92x64/000000/fff"&gt;Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and CSS:</p>
  
  <pre><code>#storiesblock {
    width: 600px;
  }
  </code></pre>
  
  <p>and, in ASCII art, what I'm trying to achieve:</p>
  
  <pre><code>IMAGEIMAGEIMAGE
  IMAGEIMAGEIMAGE Text here...
  IMAGEIMAGEIMAGE
  
  IMAGEIMAGEIMAGE Lorem Ipsum has been the industry's standard dummy text
  IMAGEIMAGEIMAGE Lorem Ipsum has been the industry's standard dummy text
  IMAGEIMAGEIMAGE Lorem Ipsum has been the industry's standard dummy text
  </code></pre>
  
  <p>where any additional text is hidden in the third block.</p>
  
  <p><a href="http://codepen.io/anon/pen/gpWJGx" rel="nofollow">http://codepen.io/anon/pen/gpWJGx</a> </p>