Centre d'Aligner sur le Menu Principal de WordPress Vingt Douze Thème

Si vous utilisez Firefox avec l'extension Firebug, vous pouvez inspecter le CSS de l'en-tête barre de menu pour trouver le code approprié. Il m'arrive d'utiliser un thème enfant de Twenty Twelve moi-même, qui dispose également d'un centre aligné les éléments de menu.

En supposant que vous utilisez un auto-hébergement du site web avec l'WordPress.org script, il devrait être un simple correctif, comme suit:

1) Si vous ne l'avez pas déjà, vous aurez besoin de créer un thème enfant. Pour ce faire, il suffit de créer un nouveau dossier dans le dossier "thème" dans le répertoire de votre installation de WordPress, et nommez-le comme quelque chose de "Vingt Douze Thème de l'enfance'. Pour plus d'informations sur les thèmes de l'enfant, voir cette page.

2) maintenant, Vous devez créer un nouveau fichier de feuille de style de votre thème enfant, et de faire charger la feuille de style du thème parent, ou votre site sera en charge sans tous les styles. Pour ce faire, ouvrez le bloc-notes et ajoutez la ligne suivante.

/*
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");

La section enveloppé dans des barres obliques avec asterikses est un commentaire. Vous pouvez ajouter des commentaires n'importe où dans votre feuille de style pour l'étiquette et organiser vos personnalisations. Les '@import' règle charge la feuille de style du thème parent, de sorte que votre enfant thème n'a pas le rendu de votre site web comme un simple squelette.

Enregistrer ce fichier sur votre thème enfant répertoire avec le nom de fichier " styles.css', et n'oubliez pas de sélectionner "Tous les fichiers "dans" type de Fichier " liste.

3) Maintenant que la base du thème de l'enfance a été créé, nous pouvons procéder à la personnalisation de la partie. Nous allons d'abord ajouter la règle CSS pour le thème du menu de navigation dans le thème de l'enfance de la feuille de style. Ce code existe déjà dans le thème parent de la feuille de style, nous sommes donc pratiquement va le remplacer avec notre personnalisation.

.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%;
}

Les déclarations à l'intérieur de cette règle CSS définissent l'apparence du menu de navigation comme un conteneur. Pour centrer aligner les éléments de menu, il suffit de remplacer la valeur de la 'text-align' propriété avec 'center'.

Enregistrer le fichier et de le recharger à nouveau à votre site web; les éléments de menu doit maintenant être le centre de l'alignement.

Ajouter ce code à votre conteneur div css.

margin:0 auto;

il va faire la div align center.