Отцентрировать горизонтальное меню

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

Сейчас код имееет вид:

Код (CODE):

1. #top  {
2.   text-align: center;
3.   background: #ffffff;
4.   display          : inline;
5.   list-style       : none;
6.   background-image : none;
7.   margin           : 30px;
8.   width            : 100%;
9.   margin           : 0 auto;
10.   font-size        : 12px;
11.   line-height      : 15px;
12.   white-space      : nowrap;
13.  
14.   }
15. #top  a {
16.          margin: 0;
17.          text-align: center;
18.          width: 100%; /* Ссылка на всю ширину пункта */
19.          padding: 5px; /* Поля вокруг надписи */
20.          text-decoration: none; /* Подчеркивание у ссылок убираем */
21.          border: 3px solid #ccc;    /* Рамка вокруг пунктов меню */
22.          background: #000000;
23.          padding-left     : 53px;
24.          padding-right    : 53px;
25.          font-size        : 12px;
26.          color            : #ffffff;
27.          text-decoration  : underline;
28.  
29. }
30.  
31. #top  a:hover {
32.                 margin: 0;
33.                 text-decoration: none; /* Подчеркивание у ссылок убираем */
34.                 text-align: center;
35.                 font-size: 12px;
36.                 color: #ff0000;
37.                 background: #ffffff;

рисунок:

 

надо в шаблоне его отцентровать то есть в index.php

 

например завернув ссылку в div и прописав

Код (html):

1. #top div {
2. align:center;
3. width:25%; /* 100% / 4 пункта меню */
4. }

 

_voland_ такой вариант не помогает

Спасибо откликнувшимся, решила свой вопрос созданием новой таблицы в index.php