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文本对齐/定位问题

回答

相关问题