Center Align Main Menu on Wordpress Twenty Twelve Theme - wordpress

Question

The main navigation menu on wordpress twenty twelve theme is left aligned by default. I am trying to center align the menu on my child theme but just cannot figure it out. Any suggestions?

Answer 1

If you use Firefox with the add-on Firebug, you can inspect the CSS of the header menu bar to find the appropriate code. I happen to use a child theme of Twenty Twelve myself, which also features center aligned menu items.
Assuming you are using a self-hosted website with the WordPress.org script, it should be a simple fix, as follows:
1) If you haven't already, you'll need to create a child theme. To do this, simply create a new folder in the 'themes' directory of your WordPress installation, and name it something like 'Twenty Twelve Child Theme'. For more information on child themes, see this page.
2) You will now need to create a new style sheet file for your child theme, and make it load the stylesheet for the parent theme, or your site will load without any styles. To do this, open Notepad and add the following.
/*
Theme Name: Twenty Twelve Child Theme
Theme URI:
Description: Child theme for Twenty Twelve
Author: <You Name here>
Author URI:
Template: twentytwelve
Version: <Add any number to your liking here, for instance '0.5'>
*/
#import url("../twentytwelve/style.css");
The section wrapped in slashes with asterikses is a comment. You can add comments anywhere in your style sheet to label and organize your customizations. The following '#import' rule loads the stylesheet of the parent theme, so that your child theme does not render your website as a mere skeleton.
Save this file to your child theme directory with the file name 'styles.css', and remember to select 'All files' in 'File type' list.
3) Now that the base of the child theme has been created, we can proceed to the customization part. First we will add the CSS rule for the theme's navigation menu into the child theme's style sheet. This code already exists within the parent theme's style sheet, so we are practically going to override it with our customization.
.main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
border-bottom-color: #EDEDED;
border-bottom-style: solid;
border-bottom-width: 1px;
border-top-color: #EDEDED;
border-top-style: solid;
border-top-width: 1px;
display: inline-block !important;
text-align: left;
width: 100%;
}
The declarations within this CSS rule define the appearance of the navigation menu as a container. To center align the menu elements, simply replace the value of the 'text-align' property with 'center'.
Save the file again and reload your website; the menu items should now be center aligned.

Answer 2

Within your Dashboard > Appearance > Editor, open your 'style.css' and scroll down until you see the heading;
/* =Main content and comment content
-------------------------------------------------------------- */
scroll down slightly and add the line text-align: center; to the bottom of your .entry-header .entry-title leaving the rest as it is.
..having done the above, here's what mine code looks like;
.entry-header .entry-title {
font-size: 20px;
font-size: 1.428571429rem;
line-height: 1.2;
font-weight: normal;
text-align: center;
}

Answer 3

Add this code part to your container div's css.
margin:0 auto;
it'll make the div align center.

Answer 4

Just add the lign: text-align: center; to .main-navigation
It should look like:
.main-navigation {
clear: both;
margin: 0 auto;
max-width: 1080px;
min-height: 45px;
position: relative;
text-align: center; }