[CSS3] jak wyśrodkować menu

Dla specjalistów Webmastering
#1

Witam jako ze jestem poczatkujacym w temacie kodowania stron zwracam sie do Was z prośbą oo pomoc.

Mam przygotowane menu w css3 i wszytsko tylko ciagle nie wiem jak wysrodkować tekst menu, menu jest poziome i jak narazie jest do lewej strony kombinoawałem z margin-left/right i nic nawet sie o pixel nie przesunało. Pozatym nie działa opcja @font face tzn nie mam w menu czcionki którą poprzez font face dorzuciałem. Poniżej dołanaczam kod css

 

 

@font-face {
    font-family: 'tw_cen_mtregular';
    src: url('../fonts/tcm-webfont.eot');
    src: url('../fonts/tcm-webfont.eot?#iefix') format('embedded-opentype');
         url('../fonts/tcm-webfont.woff') format('woff');
         url('../fonts/tcm-webfont.ttf') format('truetype');
         url('../fonts/tcm-webfont.svg#tw_cen_mtregular') format('svg');
    font-weight: normal;
    font-style: normal;
}


#cssmenu ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  position: relative;
  display: block;
  height: 60px;
  text-transform: uppercase;
  font-size: 16px;
  background: transparent url('images/menu_tlo2.png') repeat-x top left;
  font-family: 'tw_cen_mtregular';
  width: auto;
 
}
#cssmenu li {
  display: block;
  float: left;
  margin: 0;
  pading: 0;
  border-right: 1px solid #ffffff;
 
}
#cssmenu li a {
  display: block;
  float: left;
  color: #ffffff;
  text-decoration: none;
  padding: 12px 20px 0 20px;
  height: 24px;
  height: 42px;
 
}
#cssmenu li a:hover {
  background: transparent url('images/black.jpg') repeat-x top left;
}
#2 
@font-face {
    font-family: 'tw_cen_mtregular';
    src: url('../fonts/tcm-webfont.eot');
    src: url('../fonts/tcm-webfont.eot?#iefix') format('embedded-opentype');
         url('../fonts/tcm-webfont.woff') format('woff');
         url('../fonts/tcm-webfont.ttf') format('truetype');
         url('../fonts/tcm-webfont.svg#tw_cen_mtregular') format('svg');
    font-weight: normal;
    font-style: normal;
}


#cssmenu ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  position: relative;
  display: block;
  height: 60px;
  text-transform: uppercase;
  font-size: 16px;
  background: transparent url('images/menu_tlo2.png') repeat-x top left;
  font-family: 'tw_cen_mtregular';
  width: auto;
 
}
#cssmenu li {
  display: block;
  float: left;
  margin: 0;
  pading: 0;
  border-right: 1px solid #ffffff;
  text-align: center;
 
}
#cssmenu li a {
  display: block;
  float: left;
  color: #ffffff;
  text-decoration: none;
  padding: 12px 20px 0 20px;
  height: 24px;
  height: 42px;
  margin: auto
}
#cssmenu li a:hover {
  background: transparent url('images/black.jpg') repeat-x top left;
}
#3

Dalej nie jest  to co miało być

#4

a mógłbyś dodać HTML ?

#5

U mnie jest przecież na środku. Możliwe że jakieś inne style w tym mieszają.

W #cssmenu li jest literówka - padding a nie pading.

Zobacz w Chrome, wciśnij CTRL+SHIFT+I a następnie w zakładce Network zobacz czy wczytuje czcionki - jeśli jest coś na czerwono z innym statusem niż 200 to znaczy, że źle podałeś ścieżkę do czcionek.

#6

dalej mi nie wyśrodkowuje menu dołaczam html ale nie wiem czy coś to da

 

<!DOCTYPE html>