Центриране на ляво подравнени полета

  • 30.06.2004
Не е толкова лесно, колкото изглежда, да се центрира или подравни вдясно поле, със зададен float: left. За да не става объркване, уточнявам че говоря за хоризонтално меню, което се състои от няколко колони. Обичайно това става с таблица, за която са нужни точно няколко секунди, да бъде конфигурирана. Оказва се проблем, обаче, ако трябва да се направи същото меню, но без таблици.

Обикновено, използвам списъци li, когато правя хоризонтално меню: 

<div id="menu">
  <ul>
    <li>
	  Item 1
	</li><li>
	  Item 2
	</li>
      ...
    <li>
	  Item n
	</li>
  </ul>

</div>

Където LI са подравнени вляво, за да се получат n на брой колони: 

li {
  float: left;
  clear: right;
}

пример

По принцип, елементът ul е с неограничена ширина, а ширината на списъците li зависи от дължината на текста, освен ако не е изрично зададена. На практика, не може да се заставят елементите li да заемат позиция различна от лява. Единственият начин е да се центрира ul, като му се зададе определена ширина, а страничните отстъпи margin-left, margin-right се оставят свободни. 

ul {
  margin: 0 auto;
  width: 400px;
}

Списъците li не могат да се ръзпъват автоматично по цялата ширина, както клетките td в една таблица. Ако техния брой е известен, може да се постигне подобен ефект, като ширината им бъде зададена в проценти, но така че, общата стойност да не надвишава 100%. За Opera това става много по-лесно, като се използва свойството table на атрибута display. Трябва да се избягва директното задаване на отстъпи и граници на li. Най-удачно е, те да се зададат на някой вътрешен елемент, например на a, за да не влияят пряко на общите стойности. 

ul {
  display: table;
  margin: 0 auto;
  width: 400px;
  height: 30px;
}

li {
  display: table-cell;
  float: left;
  clear: right;
  width: 25%;
}

li a {
  display: block;
  margin: 0 auto;
  height: 20px;
  width: 99,9%;
  border: 2px solid green;
}

пример

Ето как, това меню може да бъде подравнено вдясно. Единственото условие е левия отстъп да се остави свободен: 

ul {
  margin: 0 0 0 auto;
}

пример

Това е спасението засега, ако искате да пишете стандартен HTML, докато са на мода браузъри от типа на IE5 и IE6.