title: Centering div within li in css
body: <p>Ok really easy I know but not for me... I can not figure this out!</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li&gt;Hi&lt;/li&gt;
    &lt;li&gt;Hello World
      &lt;div&gt;Hello again&lt;/div&gt;
    &lt;/li&gt;
    &lt;li&gt;Hola&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I need the center of the div inside the li to match up with the center of the li. Right now it aligns with left side and left side. I know that there should be an easy fix for this but I just can not find it!! I need it to be a div and not an li. Please any help will be greatly appreciated. Thank you to anyone and everyone in advance!</p>
  
  <p>Here is the little piece of css that I have now:</p>
  
  <pre><code> #show li{float: left;
            padding: 10px;
            width: 100px;
            display: block;}
      .sub{position: absolute; 
           display: block; 
           background: #333;
           color: white; 
           width: 910px;
           margin: 0 auto;}
  </code></pre>
  
  <p>The div is a drop down on mouseover using jquery, but I need the div be larger than the li, it's left side is aligning to the left side of the li, I need the entire div to center  underneath the li. I hope this makes sense. The margin 0 auto does not work.</p>