Problème de centrage horizontale

Bonjour,

J'ai commencé un petit site web juste pour apprendre en HTML/CSS et Javascript, mais je ne suis pas capable de centrer un titre (h1) dans un Div. J'ai essayer plusieurs choses, comme text-align: center, mais ça ne marchais pas, mon titre ne se centrait pas plus dans mon Div. J'ai aussi essayer margin-left: auto et margin-right: auto, et encore une fois rien ne changeait. Pouvez-vous m'aidez ?

Mon code HTML (Jusqu'ici tout est correct)

 <div id="rightMenu">
	<h1>Titre</h1>
  </div> 

Et mon code CSS

h1{

font-weight: normal;
font-family: Geneva; 
color: white;
position: absolute;
z-index: 2;

}


#rightMenu {

width: 150px;
height: 400px;
background-color: #56564E;
position: absolute;
z-index: 1;
left: 0px;
top: 0px;

Dans tous les cas que j'ai essayer (text align, margin ...), ça me donnait cela :



Merci !
Modifié par Jacob_FP (07 Jul 2015 - 18:17)

bonsoir et bienvenue,

1. Pourquoi utilises tu le positionnement absolu ? Ne penses tu pas que tu puisses le faire sans ?
2. Pour centrer horizontalement, tu vas apprendre qu'il y a beaucoup de manière pour arriver à ses fins. Je vais te montrer la manière plus simple :

<div id="rightMenu">
	<h1>Titre</h1>
  </div> 

#rightMenu {
text-align:center;
width: 150px;
height: 400px;
background-color: #56564E;

h1{
background-color: #f00;
}

le div dont l'ID est rightMenu a une déclaration de la règle css qui permet de centrer le texte à l'intérieur. De ce fait l'élément h1 (de type de rendu block par défaut) obtient par héritage la déclaration de son parent (text-align:center). Si tu veux que le h1 soit seulement centrer, alors tu retires la règle css text-align de son parent et tu lui attributs cette nouvel règle (pour lui même seulement)
Modifié par niuxe (08 Jul 2015 - 00:08)