margin: 0 auto для меню span float:left

[Вадим]

Добрый день!

Не получается .menu span сделать по центру блока .menu

.wrap {position: relative; min-height: 100%; height: auto; -height: 100%;}
.container {margin: 0 auto; padding-bottom: 198px; min-width: 998px; max-width: 1000px;}
.content {padding: 80px 0px 0px 13px;}

.head {padding: 0; height: 247px; background: #ffffff url(../img/headerbg.jpg) 50% 100% no-repeat;}
.logo {width: 187px; height: 49px; padding: 77px 0 0 64px;}
.logo img {width: 180px; height: 146px;}

.foot {background: #ffffff url(../img/footerbg.jpg) 50% 0 no-repeat; width: 100%; position: absolute; bottom: 20px; height: 129px; z-index: 22; left: 0;}
#foot {margin: 0 auto; min-width: 998px; max-width: 1000px;}
.foot .foot_inner {padding: 20px 35px 0 35px; height: 90px; overflow: hidden;}

.menu {height: 51px; margin: 121px auto; text-align: center; background: #1c4664; border-right: solid 1px #ededef; border-left: solid 1px #ededef;}
.menu span {display: block; float:left; height: 51px; font-size: 10px; text-transform: uppercase; font-weight: bold; background: url(../img/menu.jpg) 0 0 no-repeat; color: #000000; border-right: solid 1px #363636;}
.menu span a {display: block; padding: 17px 26px 20px 26px; height: 12px; white-space: nowrap; line-height: 17px; float: left; color: #ffffff; border-right: solid 1px #58899b; border-bottom: solid 1px #58899b; border-left: solid 1px #58899b;}
.menu span a.now,.menu span a:hover {border-right: solid 1px #58899b; border-top: solid 1px #58899b; border-left: solid 1px #58899b; border-bottom: solid 1px #ffffff; padding: 17px 26px 20px 26px; background: url(../img/selfbg.jpg) 0 0 repeat-x; color: #000000;}
.menu .submenu {position: absolute; z-index: 30; height: 1px; width: 1px; clear: both; display: none;}
.menu .submenu_inner {position: relative; z-index: 31; top: 38px; //top: 0; width: 160px; background: #3c6e56; font-size: 10px;}
.menu .submenu_inner a {display: block; padding: 8px 25px 8px 10px; border-top: #80a091 1px solid; white-space: normal; background: none; color: #FFFFFF; height: auto; float: none;}
.menu .submenu_inner a.first {border: none; padding: 9px 25px 8px 10px;}
.menu .submenu_inner a:hover,.menu .submenu_inner a.now {padding: 9px 10px 8px 25px; background: #80a091 url(img/submenu_point.gif) 10px 15px no-repeat; border: none;}

<div class="wrap">
<div class="container" id="wrap">
	<div class="head">
		<div class="logo"><a href="/"><img src="img/logo.png" alt="НПФ Инновационные Технологии" title="" /></a></div>
		<div class="menu">
			<span><a href="">Главная</a></span>
			<span><a href="">О компании</a></span>
			<span><a href="">Услуги</a></span>
			<span><a href="">Продукты</a></span>
			<span><a href="">Клиенты</a></span>
			<span><a href="">Партнеры</a></span>
			<span>
				<a class="now" href="">Материалы</a>
				<div class="submenu"><div class="submenu_inner">
					<a class="first" href="">Нормативные документы</a>
					<a href="">ГОСТ</a>
					<a href="">ISO 9000.1</a>
					<a href="">ФЗ №300.1-14</a>
				</div></div>
			</span>
			<span><a href="">Новости</a></span>
			<span><a href="">Контакты</a></span>
			<div class="clear"></div>
		</div>
</div></div></div>

Вверху как есть, внизу как должно быть:

Edited March 31, 2012 by Вадим

[IIAIIIA]

Не до конца понимаете, что вы делаете.

.menu{
	text-align: center;
}
.menu a{
	width: 100px;
	display: inline-block;
	*display: inline;
}

<div class="menu">
	<a href="#">Главная</a>
	<a href="#">Новости</a>
	<a href="#">Компании</a>
	<a href="#">Статьи</a>
	<a href="#">Контакты</a>
	<a href="#">Друзья</a>
	<a href="#">Враги</a>
</div>

И не надо плодить кучу вложенностей. Настраивайте внешний вид ссылок как вашей душе угодно.

[Вадим]

так не выйдет... нужны спаны для обвёртки. поверьте. Эта вёрстка не для html сайта, а для натягивания на cms, поэтому без span не обойтись. нужны вложенности.

НО за пример спасибо, очень чисто сделано!

Edited March 31, 2012 by Вадим