title: position img|span|div of unknown dimensions in any of 9 possible positions within a div of unknown dimensions using pure CSS
body: <p>I've asked a <a href="https://stackoverflow.com/questions/30340103/how-to-have-a-div-with-two-images-in-any-of-9-possible-positions" title="similar question">similar question</a> and tried to modify it's answer for this but I'm not sure what to do.</p>
  
  <p>I have a <code>div</code> of unknown dimensions and I need to place an <code>img</code>, <code>span</code>, or <code>div</code> in one of 9 positions within it.</p>
  
  <ul>
  <li>top left</li>
  <li>top middle</li>
  <li>top right</li>
  <li>center left</li>
  <li>center middle</li>
  <li>center right</li>
  <li>bottom left</li>
  <li>bottom middle</li>
  <li>bottom right</li>
  </ul>
  
  <p>The question from above works for images but not with anything of unknown dimensions.</p>
  
  <p>I've tried various combinations but cannot figure it out. <a href="http://jsfiddle.net/g7hydky2/3/" rel="nofollow noreferrer">http://jsfiddle.net/g7hydky2/3/</a> is what I'm working with.</p>
  
  <p>The only thing I can think of is using <code>display: table</code> and <code>display: table-cell</code> on the outer and inner elements because then I can fully use <code>vertical-align</code> and <code>text-align</code>. However, this seems like a bad hack and I feel like there has to be a better way.</p>
  
  <p>Also, I need this to work on IE 8...</p>