Façon de centrer le contenu avec le thème CSS dans Wordpress?

Question

J'essaie de trouver un moyen CSS pour centrer mon contenu. Voici mon site: http://www.thegrassrootsgarage.com/?preview_id=41&preview_nonce=58439a219d&_thumbnail_id=-1&preview=true.

Vous remarquerez que le contenu reste à gauche de la page d'accueil? Je veux garder la largeur de 720 px dans le #wrapper # contenu principal de mon CSS, mais je ne suis pas sûr comment centrer le contenu et l'amener à apparaître au milieu de l'écran. Je voudrais juste avoir le texte aligné à gauche (le texte restera aligné à gauche, car le contenu sera centré) commencer au centre. J'ai déjà essayé text-align, align-content, margin: 0, et quelques autres, mais j'ai peut-être mal positionné leur emplacement parce que je ne suis pas devenu un adepte de la lecture de cette page CSS.

Finalement, le texte serait aligné à gauche, et le contenu serait au centre. J'essaye de changer le positionnement du contenu, lui-même, qui devrait prendre le texte (qui sera toujours aligné à gauche, avec lui). Des idées?

Voici quelques-unes des CSS global pour mon site et le thème Wordpress:

#header, 
#main-content, 
#wrapper-footer { 
    float: left; 
    height: auto; 
    position: relative; 
    width: 100%;   
}  
#wrapper #main-content { 
    padding: 28px 28px 10px; 
    width: 720px;   
} 
#content { 
    float: left; 
    width: 750px;  
} 

j'ai pu changer la largeur de la principale teneur #wrapper # de 956px à 720px, ce qui est de la taille que je veux pour mon contenu, mais je le veux centré! Je ne suis pas sûr de savoir comment faire cela, et comme indiqué, j'ai essayé différentes méthodes. Peut-être que je suis en train d'éditer les mauvais éléments pour ce but précis?

Je peux fournir le reste du CSS que j'ai actuellement si nécessaire, bien sûr.

Answer 1

J'ai remarqué que votre style.css déclare un flottant à gauche sur votre contenu principal. Peut-être que c'est parce que normalement il y a une barre latérale là. Une solution simple serait d'avoir ceci:

#wrapper #main-content { 
    padding: 28px 28px 10px; 
    width: 720px; 
    margin: 0 auto; //<-- added this line 
    float: none; //<-- added this line 
} 

vous devez assurer cela vient après d'autres déclarations de style sur la page.

MISE À JOUR

Très vrai. Cela affectera chaque page. Dans la classe body de votre thème, il imprime l'identifiant page-id- {numéro} pour les articles. Vous pouvez donc avoir des css très spécifiques juste pour cette page, ou créer des css très spécifiques pour n'importe quelle autre page que vous choisissez. Cela devrait fonctionner:

.page-id-41 #main-content { 
    float: none; 
    margin: 0 auto; 
} 

Side note - J'ai accidentellement ajouté la réponse à votre question initiale - mais je l'ai retiré et ont ajouté ici