0

I am trying to get my nav menu to center in it's div, but I can't seem to figure out how. Please take a look and help if you can. Normal text gets centered but I can't get my menu to center.

HTML: 

<div id = "nav_menu_secondary">
    <div id = "center_wrap">
        <?php $args = array(
            'theme_location' => 'secondary' );
             wp_nav_menu(  $args ); ?>
    </div>
</div>

CSS:

#center_wrap {
margin: 0 auto;
text-align: center; }
Beaut
  • 114
  • 2
  • 10
  • if `#center_wrap` has `width: 100%`, then it won't center align. Reduce the width and try again –  Jun 19 '15 at 18:01
  • I have tried using different widths and it still won't center my PHP code. It centers my text perfectly though. – Beaut Jun 19 '15 at 18:08
  • Can you post your HTML structure? –  Jun 19 '15 at 18:14
  • possible duplicate of [Horizontally center a div in a div](http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a-div) – easwee Jun 19 '15 at 20:03

1 Answers1

0

The result of wp_nav_menu() is probably a nav element, which is displayed as a block element in most browsers. In that case, adding text-align: center; to the parent has no effect. The solution would be to somehow add margin: 0 auto; to the nav element itself.

lucasnadalutti
  • 5,818
  • 1
  • 28
  • 48
  • I think this is the correct solution... but I'm not sure how to implement it. Adding `margin: 0 auto;` to `nav_menu_secondary` doesn't center anything. – Beaut Jun 19 '15 at 18:28
  • But is nav_menu_secondary really the class of the resulting nav? Could you paste the link of the page if it's live? Or the resulting HTML? – lucasnadalutti Jun 19 '15 at 18:32
  • It is locally hosts as of now, sorry. I am going to find a different solution because changing the style of the generated html is making my other menus go wonky. Thanks for the help. – Beaut Jun 19 '15 at 18:49
  • Actually, you could try one last thing: add #center_wrap nav { display: block; } in your CSS file. This should add the style only to the resulting nav element. – lucasnadalutti Jun 19 '15 at 18:53
  • Just checked here and it seems that the resulting element is wrapped by a div. In this case, adding `#center_wrap div { display: block; margin: 0 auto; }` to your CSS definitely should solve the problem. – lucasnadalutti Jun 19 '15 at 18:57