title: css text-align/positioning question
body: <p>The situation: I have several lists; in each of these lists, the text inside the first li is positioned slightly to the right of center, instead of exactly in the center like the following li elements. In the following example, the second row text ("Site Map") is not centered. Any ideas?</p>
  
  <p>The html:</p>
  
  <pre><code>&lt;body&gt;
  &lt;!-- &lt;div class="header"&gt;Module Settings&lt;/div&gt;  --&gt;
  &lt;div class="left_content"&gt;      
      &lt;div id="header_nav" class="moduleTypeContent" style="top:-50px" name="header_nav"&gt;
          &lt;div class="moduleTypeHeader"&gt;          
              &lt;div class="text-center"&gt;header_nav&lt;/div&gt;                   
          &lt;/div&gt;                  
          &lt;ol class="connectedSortable sortable used nonest"&gt;                                         
              &lt;li id="list_39"&gt;                   
                  &lt;div class="listItemContents"&gt;                                                          
                      &lt;div class="moduleTypeItem left"&gt;
                          &lt;a href="?file=Administration/navigation/index.cfm&amp;deleteModule=39" class="deleteRow"&gt;&lt;img src="common/images/icons/shadowed/cross-circle.png" alt="Delete Site Map" width="16" height="16" border="0"  class="icon rightspace" /&gt;&lt;/a&gt;
                      &lt;/div&gt;                                  
                      &lt;div class="moduleTypeItem center text-center"&gt;
                          &lt;a href="?file=Administration/navigation/index.cfm&amp;id=39"&gt;Site Map&lt;/a&gt;
                      &lt;/div&gt;                                  
                      &lt;div class="moduleTypeItem right text-center"&gt;
                          all
                      &lt;/div&gt;                          
                  &lt;/div&gt;                      
              &lt;/li&gt;
              &lt;li id="list_38"&gt;                   
                  &lt;div class="listItemContents"&gt;                                                          
                      &lt;div class="moduleTypeItem left"&gt;
                          &lt;a href="?file=Administration/navigation/index.cfm&amp;deleteModule=38" class="deleteRow"&gt;&lt;img src="common/images/icons/shadowed/cross-circle.png" alt="Delete Contact Us" width="16" height="16" border="0"  class="icon rightspace" /&gt;&lt;/a&gt;
                      &lt;/div&gt;                                  
                      &lt;div class="moduleTypeItem center text-center"&gt;
                          &lt;a href="?file=Administration/navigation/index.cfm&amp;id=38"&gt;Contact Us&lt;/a&gt;
                      &lt;/div&gt;                                  
                      &lt;div class="moduleTypeItem right text-center"&gt;
                          all
                      &lt;/div&gt;                          
                  &lt;/div&gt;                      
              &lt;/li&gt;                                               
              &lt;li id="list_6"&gt;                    
                  &lt;div class="listItemContents"&gt;                                                      
                      &lt;div class="moduleTypeItem left"&gt;
                          &lt;a href="?file=Administration/navigation/index.cfm&amp;deleteModule=6" class="deleteRow"&gt;&lt;img src="common/images/icons/shadowed/cross-circle.png" alt="Delete Help" width="16" height="16" border="0"  class="icon rightspace" /&gt;&lt;/a&gt;
                      &lt;/div&gt;                                  
                      &lt;div class="moduleTypeItem center text-center"&gt;
                          &lt;a href="?file=Administration/navigation/index.cfm&amp;id=6"&gt;Help&lt;/a&gt;
                      &lt;/div&gt;                                  
                      &lt;div class="moduleTypeItem right text-center"&gt;
                          all
                      &lt;/div&gt;                          
                  &lt;/div&gt;                      
              &lt;/li&gt;                                   
          &lt;/ol&gt;
      &lt;/div&gt;
  &lt;/div&gt;  
  </code></pre>
  
  <p></p>
  
  <p>and the relevant css:</p>
  
  <pre><code>html, body {
      height:100%
  }
  
  body {
      margin: 0px;
      font-size: 12px;
      font-family: Arial;
      font-family: Arial, Verdana, Univers;
      background-color: #f0eff0;
  }
  ol {
      border: 0 solid #aeaeae;
      border-width: 0;
      margin: 0;
      padding: 0;
      padding-left: 30px;
  }
  ol.sortable, ol.sortable ol {
      margin: 0 0 0 25px;
      padding: 0;
      list-style-type: none;
  }
  ol.sortable {
      margin: 4em 0;
  }
  .sortable li {
      margin: 0 0 0 0;
      padding: 0;
  }
  .sortable li div  {
      border: 0 solid #aeaeae;
      border-width: 1px;
      padding: 0px;
      margin: 0;
      cursor: move;
  }
  div.moduleTypeDiv {
      font-family: Arial, Verdana, Helvetica, sans-serif;
      font-size: 12px;
      width:100%;
  }
  div.moduleTypeHeader {
      border:1px solid #6d6d6d;
      padding: 6px;
  }
  div.moduleTypeHeader {
      background: #336699 url(../images/table_header_highlight.png) repeat-x bottom;
      font-weight:bold;
      color: #ffffff;
  }
  div.moduleTypeHeader a {
      color: #ffffff;
  }
  .left_content{
      width:48%;
      float: left;
  }
  .moduleTypeContent{
      position:relative;
      top: -50px;
  }
  .moduleTypeHeader{
      position: relative;
      bottom: -48px;
  }
  .legendItem.left, .moduleTypeItem.left{
      float: left;
      width: 18px;
      padding: 5px;
      border:0px ;
      border-right: 1px solid #aeaeae;
  }
  .legendItem.center, .moduleTypeItem.center {        
      padding:6px;    
      border:0px ;    
  }
  .legendItem.right, .moduleTypeItem.right {  
      position: relative;
      top: -25px;
      float: right;
      width: 100px;
      padding:6px;
      width:50px;
      border:0px ;
      border-left: 1px solid #aeaeae;
  }
  .listItemContents {
      position:relative;
  }
  .text-center { text-align:center; }
  </code></pre>
  
  <p>Thanks!</p>
  
  <p>p.s. I created a fiddle: <a href="http://jsfiddle.net/earachefl/c2bcc/" rel="nofollow">http://jsfiddle.net/earachefl/c2bcc/</a></p>