css text-align/positioning question
Ситуация: у меня несколько списков; в каждом из этих списков текст внутри первого li расположен немного правее центра, а не точно в центре, как следующие элементы li. В следующем примере текст второй строки ("Карта сайта") не центрируется. Есть идеи?
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; }
Спасибо!
PS Я создал скрипку: http://jsfiddle.net/earachefl/c2bcc/
1 ответ
Вы делаете действительно странное позиционирование на правильных элементах "столбца", перемещая правые, но фактически не оставляя им места для них на строке, которой они принадлежат, поэтому они выталкиваются вниз на строку, а затем с помощью относительного позиционирования - "взлом" их туда, где вы хотите их. И, таким образом, в первой строке нет элемента, который бы сдвинул текст влево, чтобы он выглядел по центру.
Простое решение: используйте таблицу. Ваш код является ярким примером плохого "взлома CSS" из-за неправильного понимания правила "Не используйте таблицы для разметки". Пожалуйста, используйте стол. Пожалуйста.
РЕДАКТИРОВАТЬ: Поскольку вы не можете использовать таблицу, вот что вам нужно сделать:
- Переместить "правый" столбец на первую позицию в элементе списка
- Дайте центральному столбцу достаточно широкое правое поле, чтобы оно соответствовало правому столбцу. (63px = 50px width + 2 * 6px padding + 1px left-border)