css text-align/positioning question
https://stackoverflow.com/questions/7190710
-
12-01-2021 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
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-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; }
Thanks!
p.s. I created a fiddle: http://jsfiddle.net/earachefl/c2bcc/
Solution
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)
