title: Responsive design image aligning
body: <p>I am a novice html/CSS programmer who needs to satisfy a very specific set of circumstances. 
  I have 2 images, both must be aligned vertically by the center of the image. One image must be left aligned and the other must be right aligned. They will be in a max width div but I don't think that should be an issue. As the webpage is shrunk down below the width of the two pictures together, the images then need to be horizontally centered with one image on top of the other. I have added pictures to clarfiy (sorry I would have added as pictures but I have zero rep). The div container and images will all be variable so positioning based upon pixels is out of the question.</p>
  
  <p>So I researched this a ton, but all answers I've found have been partial; not able to do everything I'm looking for. Any ideas?</p>
  
  <p>(<a href="http://imageshack.us/a/img819/9515/3zt.gif" rel="nofollow noreferrer">http://imageshack.us/a/img819/9515/3zt.gif</a>)</p>
  
  <p>(<a href="http://imageshack.us/a/img14/853/qp8.gif" rel="nofollow noreferrer">http://imageshack.us/a/img14/853/qp8.gif</a>)</p>
  
  <p>Research:<br>
  I notice my question was -1'd.  I guess not providing my research was the fault?  Here's some of the methods I tried to fix this issue:
  <a href="https://stackoverflow.com/questions/79461/vertical-alignment-of-elements-in-a-div">Vertical alignment of elements in a div</a></p>
  
  <p><a href="https://stackoverflow.com/questions/7273338/how-to-properly-align-an-image-vertically">How to vertically align an image inside div</a></p>
  
  <p><a href="https://stackoverflow.com/questions/12557897/how-to-vertically-middle-align-floating-elements-of-unknown-heights">How to vertically middle-align floating elements of unknown heights?</a></p>
  
  <p><a href="https://stackoverflow.com/questions/11250501/wrap-long-html-tables-to-next-line">Wrap long HTML tables to next line</a></p>