html css においてグローバルナビゲーションの中央寄せが出来ない

wordpressでテーマの作成を行っていますが、どうもグローバルナビゲーションの画面中央寄せがうまく出来ずに困っています。
text-align: center
margin-left:auto
margin-right:autoなど駆使してもまったく動きません。
position:absoluteやmargin:0を削除してもまったく動きませんでした。

html
1<body class="home">
2<div id="wrap">
3  <section id="description">
4    <h1><?php bloginfo('description'); ?></h1>
5  </section><!-- #description end -->
6  <div id="container">
7    <header id="header">
8      <h1 id="site-id">
9        <a href="<?php echo home_url('/'); ?>"><img src="<?php bloginfo('template_url'); ?>/images/header/site_id.png" alt="<?php bloginfo('name'); ?>" /></a>
10      </h1><!-- #site-id end -->
11      <div id="utility-group">
12<?php
13  wp_nav_menu(array(
14    'container' => 'nav',
15    'container_id' => 'utility-nav',
16    'theme_location' => 'place_utility',
17  ));
18?>
19        <div id="header-widget-area">
20          <aside class="widget_search">
21            <form role="search" id="searchform">
22              <div>
23                <input type="text" id="s" />
24                <input type="submit" id="searchsubmit"/>
25              </div>
26            </form><!-- #searchform end -->
27          </aside><!-- .widget_search end -->
28        </div><!-- #header-widget-area end -->
29      </div><!-- #utility-group end -->
30    </header><!-- #header end -->
31 <?php wp_nav_menu(array(
32    'container' => 'nav',
33    'container_id' => 'global-nav',
34    'theme_location' => 'place_global',
35  ));
36?>
37    <section id="branding">
38      <img src="<?php bloginfo('template_url'); ?>/images/header/default.png"    alt="" />
39    </section><!-- #branding end -->

layout.css
1#global-nav {
2	height: 52px;
3	margin-bottom: -11px;
4    text-align: center;
5}
6
7#global-nav ul {
8    text-align: center;
9}

nav.css
1@media only screen and (min-width:992px){
2#global-nav ul {
3	margin: 0;
4	position: absolute;
5	z-index: 10;
6}
7
8#global-nav ul li {
9	float: left;
10}
11
12#global-nav ul li li {
13	float: none;
14}
15
16#global-nav a {
17	display: block;
18	width: 190px;
19	height: 52px;
20	text-indent: -9999px;
21	outline: 0;
22}
23
24#global-nav li ul {
25	display: none;
26}

親要素にposition: relative;を指定したところ、中央寄せにはなりましたが、ヘッダー画像とナビゲーションの間にわずかに隙間が発生してしまいました。。。。
この隙間は実はグローバルナビゲーションの下側に三角の装飾をつけているのですが、その部分分ヘッダー画像が下がってきてしまいました・・・・

行動規範の内容に同意します

回答1件

ベストアンサー

position: absolute; や float: left; された要素は、text-align でセンタリングはできません。

css
1/* left, rightを0にして、marginをautoにするとセンタリングできる */
2#global-nav ul {
3  margin: auto;
4  left: 0;
5  right: 0;
6  position: absolute;
7  z-index: 10;
8}