Как центрировать пункты в горизонтальном меню [РЕШЕНО]

[makaveli]

Добрый вечер. Помогите, пожалуйста центрировать пункты меню.

Правка в header.tpl не помогает. Прописываю к <div id="menu"> align="center" и нифига. Кто знает как?

Змінено 8 лютого 2013 користувачем tim21701
Изменил Ваш "РИСУНОК" на скриншот...

[tim21701]

Редактировать файл шаблона *.tpl для этого не обязательно. (Хотя, есть и такой вариант)

Открываем файл: catalog/view/theme/ВАША_ТЕМА/stylesheet/stylesheet.css и находим строки:

#menu {
background: #585858;
border-bottom: 1px solid #000000;
height: 37px;
margin-bottom: 15px;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-khtml-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
-webkit-box-shadow: 0px 2px 2px #DDDDDD;
-moz-box-shadow: 0px 2px 2px #DDDDDD;
box-shadow: 0px 2px 2px #DDDDDD;
padding: 0px 5px;
}

Добавляем туда строку (в любое место):

text-align:center;

Чуть ниже, (в этом же файле) находим:

#menu ul {
list-style: none;
margin: 0;
padding: 0;
}

Меняем на эти строки:

#menu ul {
list-style: none;
margin:auto;
padding: 0;
display:inline-block;
margin-bottom:-4px;
text-align:left;
}

Результат:

[bullneformal]

Блин, вот во всех подобных статьях пишут про меню построенное на ul li. А у меня нет  ul !! ((( cms опенкарт 2,3. 
Вот кодец:

 

#menu {

 

background-color: #434343;

background-image: linear-gradient(to bottom, #434343, #4c4c4c);

background-repeat: repeat-x;

border-color: #4c4c4c #4c4c4c #434343;

min-height: 40px;

 

 

 

}

#menu .nav > li > a {

color: #a0eb00;

text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);

padding: 10px 15px 10px 15px;

min-height: 15px;

background-color: transparent;

 

}

 

#menu .nav > li > a:hover, #menu .nav > li.open > a {

background-color:#313432;

}

#menu .dropdown-menu {

padding-bottom: 0;

opacity: 0.95;

 

 

}

#menu .dropdown-inner {

display: table;

}

#menu .dropdown-inner ul {

display: table-cell;

 

 

}

#menu .dropdown-inner a {

min-width: 160px;

display: block;

padding: 3px 20px;

clear: both;

line-height: 20px;

color: #434343;

font-size: 14px;

}

#menu .dropdown-inner li a:hover {

color: #a0eb00;

background-image: linear-gradient(to bottom, #434343, #303431);

Помогите, пожалуйста!