css文本對齊/定位問題

情況：我有幾個列表;在這些列表中的每一箇中，第一個裏面的文本都位於中心的右側，而不像下面的li元素那樣處於中心位置。在以下示例中，第二行文本（「站點地圖」）未居中。有任何想法嗎？css文本對齊/定位問題

的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>

及相關的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-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; }

謝謝！

p.s.我創建了一個小提琴：http://jsfiddle.net/earachefl/c2bcc/

來源

2011-08-25 earachefl

第一件事，我注意到：'name'是不適合你使用它的元素的有效屬性。 – RoToRa

我注意到的第二件事：這顯然是一張桌子，所以使用一張桌子。 – RoToRa

我不行。我正在使用jQuery嵌套可排序插件（mjsarfatti.com/sandbox/nestedSortable）來創建可排序的嵌套列表，所以表格已經出來。 – earachefl

你正在右邊的「列」元素上進行一些非常奇怪的定位，但是實際上並沒有在它們所屬的線上爲它們留下任何空間，所以它們被按下行，然後使用相對定位是「黑客」他們回到你想要他們的地方。因此，第一行中沒有任何項目會將文本左移，使其看起來居中。

簡單的解決方案：使用表格。你的代碼是一個糟糕的「CSS黑客攻擊」的典型例子，因爲誤解了規則「不要使用表格進行佈局」。請用桌子。請。

編輯： 因爲你不能使用表，這裏是你必須做的：

移動「正確」列在列表項的第一位置
給的中間一列的右邊緣足夠寬，右欄適合它。（63px = 50px的寬度+ 2 * 6像素填充+ 1px的左邊框）

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

來源

2011-08-25 13:14:24 RoToRa

我不行。我正在使用jQuery嵌套可排序插件（http://mjsarfatti.com/sandbox/nestedSortable/）來創建可排序的嵌套列表，所以表格已經出來。 – earachefl

你真的有一個**嵌套**列表？因爲這是該插件的用途。我相信其他可排序的插件將與表一起工作。 – RoToRa

是的，我確實 - 一個嵌套，兩個未嵌套，全部連接在一起。我沒有在頁面中包含很多內容，因爲它不相關。 – earachefl

css文本對齊/定位問題

回答

相關問題