Aller au contenu

Impossible de centrer mes elements


Sujets conseillés

Posté (modifié)

Slt

Je doit faire le site pour un pote et la j'ai un souci pour centrer mes elements. Il y a son logo et 3 bouton survoles. Le logo et les 3 boutons sont chacun dans une balise <span> et les 4 dans une balise <div> (qui est donc le conteneur). Pour centrer les elements du conteneur j'ai mis la propriete text-align:center; mais ca ne se centre pas. J'ai vu dans d'autres post qu'il fallait aussi mettre les proprietes margin-left:auto; et margin-right:auto;. Mais ca ne se centre toujours pas.

Meme la zone de texte (<span class="block-texte">) ne veux pas se centrer malgre les proprietes text-align:center;, margin-left:auto; et margin-right:auto; dans son code CSS (block-texte).

Merci pour vos lumieres.

Lien vers la page

Modifié par Nenex
Posté

A mon avis, les textes sont bien centrés mais les span ne prennent pas toute la largeur, ce qui donne donc l'impression que le texte est aligné à gauche. Un bon truc que j'utilise quand je travaille avec des div ou des span, c'est de leur mettre une couleur de fond pendant la construction pour bien visualiser comment ils s'agencent dans la page. J'espère que ça peut t'aider... :)

Posté

Salut!

Tu as attribué la propriété "position: absolute" sur tes boutons donc ton "text-align" ne fonctionnera pas. Pour centrer ton élément dans le conteneur tu dois donc lui indiquer la distane entre le bord gauche (ou droit) et le centre (avec la propriété "left" ou "right). Essaie avec le code suivant, ça devrait fonctionner ;)

.bouton-catalogue {
width:100px;
height:35px;
background:url(../elements-du-site/accueil/bouton-catalogue-01.png);
display:block;
position:absolute;
background-repeat:no-repeat;
top:70px; /* Distance avec le bord haut */
left:50%; /* Distance avec le bord gauche de ton conteneur */
text-decoration:none;
}

Posté

Je ne crois pas... Left: 50% ça va faire que le côté gauche va être centré, pas que le bouton va être centré.

Au choix il faut soit tenir compte de la largeur pour calculer le left (en % ou en absolu), soit, et c'est probablement la meilleure solution, virer le position: absolute (et donc les top et left qui vont avec) dont je n'ai pas bien compris à quoi il pouvait bien servir ici. Si c'est pour contrôler l'espace autour/entre les boutons il y margin-top/bottom pour ça.

Jacques.

Posté (modifié)

Merci pour vos reponses.

Je ne crois pas... Left: 50% ça va faire que le côté gauche va être centré, pas que le bouton va être centré.

Au choix il faut soit tenir compte de la largeur pour calculer le left (en % ou en absolu), soit, et c'est probablement la meilleure solution, virer le position: absolute (et donc les top et left qui vont avec) dont je n'ai pas bien compris à quoi il pouvait bien servir ici. Si c'est pour contrôler l'espace autour/entre les boutons il y margin-top/bottom pour ça.

Jacques.

En virant la position: absolute et mon left les elements sont centres.

Edit 01 : Je peux pas editer mon 1er post pour le mettre en [RESOLU] alors que mon dernier oui ??? :wacko:

Edit 02 : je reviens car il ya un truc de zarbi. Je bosse avec Dreamweaver, quand je suis en mode creation les elements sont centres. Mais apres avoir mis a jour les fichiers et que j'ouvre ma page, les element sont a gauche...

Modifié par Nenex
Posté

On ne peut pas éditer les posts a postériori au delà d'un certain temps... et il n'est pas dans nos habitudes de mettre [Resolu] en titre ;)

Et en ce qui concerne DreamWeaver, il ne faut pas se fier à sa prévisualisation. Elle n'est pas 100% exacte.

Posté
On ne peut pas éditer les posts a postériori au delà d'un certain temps... et il n'est pas dans nos habitudes de mettre [Resolu] en titre ;)

Et en ce qui concerne DreamWeaver, il ne faut pas se fier à sa prévisualisation. Elle n'est pas 100% exacte.

Pour autre chose (je sais plus quoi) je me suis rendu compte qu'il n'etait pas fiable dans sa previsualisation. Donc mon probleme est toujours la.

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...