css text-align/positioning question_问答_开发者

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?

The html:

<body>
<!-- <div class="header">Module Settings</div>  -->
<div class="left_content">      
    <div id="header_nav" class="moduleTypeContent" style="top:-50px" name="header_nav">
        <div class="moduleTypeHeader">          
            <div class="text-center">header_nav</div>                   
        </div>                  
        <ol class="connectedSortable sortable used nonest">                                         
            <li id="list_39">                   
                <div class="listItemContents">                                                          
                    <div class="moduleTypeItem left">
                        <a href="?file=Administration/navigation/index.cfm&deleteModule=39" class="deleteRow"><img src="common/images/icons/shadowed/cross-circle.png" alt="Delete Site Map" width="16" height="16" border="0"  class="icon rightspace" /></a>
                    </div>                                  
                    <div class="moduleTypeItem center text-center">
                        <a href="?file=Administration/navigation/index.cfm&id=39">Site Map</a>
                    </div>                                  
                    <div class="moduleTypeItem right text-center">
                        all
                    </div>                          
                </div>                      
            </li>
            <li id="list_38">                   
                <div class="listItemContents">                                                          
                    <div class="moduleTypeItem left">
                        <a href="?file=Administration/navigation/index.cfm&deleteModule=38" class="deleteRow"><img src="common/images/icons/shadowed/cross-circle.png" alt="Delete Contact Us" width="16" height="16" border="0"  class="icon rightspace" /></a>
                    </div>                                  
                    <div class="moduleTypeItem center text-center">
                        <a href="?file=Administration/navigation/index.cfm&id=38">Contact Us</a>
                    </div>                                  
                    <div class="moduleTypeItem right text-center">
                        all
                    </div>                          
                </div>                      
            </li>                                               
            <li id="list_6">                    
                <div class="listItemContents">                                                      
                    <div class="moduleTypeItem left">
                        <a href="?file=Administration/navigation/index.cfm&deleteModule=6" class="deleteRow"><img src="common/images/icons/shadowed/cross-circle.png" alt="Delete Help" width="16" height="16" border="0"  class="icon rightspace" /></a>
                    </div>                                  
                    <div class="moduleTypeItem center text-center">
                        <a href="?file=Administration/navigation/index.cfm&id=6">Help</a>
                    </div>                                  
                    <div class="moduleTypeItem right text-center">
                        all
                    </div>                          
                </div>                      
            </li>                                   
        </ol>
    </div>
</div>

and the relevant css:

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-typ开发者_如何学Goe: 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; }

Thanks!

p.s. I created a fiddle: http://jsfiddle.net/earachefl/c2bcc/

You are doing some really weird positioning on the right "column" elements by floating the right, but not actually leaving them any space for them on the line they belong, so they are pushed down a row and then using relative positioning is "hack" them back where you want them. And thus there is no item in the first line that would push the text left so that it would appear centered.

Simple solution: Use a table. Your code is a prime example of bad "CSS hacking" because of misunderstanding the rule "Don't use tables for layout". Please, use a table. Please.

EDIT: Since you can't use a table, here's what you have to do:

Move the "right" column to the first position in the list item
Give the center column a right margin wide enough for the right column to fit it. (63px = 50px width + 2 * 6px padding + 1px left-border)

http://jsfiddle.net/Se87U/1/