Discussion :

[LouiseT]

Bonsoir, je suis tombée sur ce forum en cherchant de l'aide pour mon placement de boutons. Je n'ai rien trouvé sur les sites et memento j’essaie donc sur un forum d'avoir une réponse à ma question !

J'ai ce placement là.. Flèche noir et j'aimerai que mes boutons soit centrer au milieu de la page quelques soit l'ordinateur que l'on utilise car leurs places change selon le pc ! Donc centrer comme l'indique la flèche rouge. Comment puis-je centrer mes boutons comme je le souhaite, voici mon code.. Si cela peut vous aidez à me comprendre ^^

http://image.noelshack.com/fichiers/...es-boutons.png

Html :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<header>
 	    <h1 id="logo" title="Logo">Logo</h1>
 
        <ol id="entete">
        <li><button href="#">Page 1</button></li>
        <li><button href="#">Page 2</button></li>
        </ol> <!-- entete -->
 
        </header>

CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#entete 
{
position: relative;
bottom: 3.7em; /* Position bouton */
left: 40em;    /* Position bouton */
}
 
#entete li 
{
display: inline-block;
margin: 0 2em;
}
 
#entete li button
{
display: block;
width: 8em; /* largeur des boutons */
height: 2.5em; /* longueur des boutons */
background-color: #fff; /* couleur des boutons */
color: #000; /* Couleur de la police dans les boutons */
text-align: center; /* Centre le texte dans les boutons */
font-weight: bold; /* Met l'écriture en gras */
border: 1px solid gray; /* Creer une bordure pour les boutons */

[Muchos]

Si vous avez aligné le texte dans vos boutons (comportement par défaut, au passage), vous savez comment aligner vos boutons dans le header

NOTA: pensez à retirer le padding de la balise OL quand vous ferez l'alignement, et aussi à fermer l'accolade à la fin de votre css.

[LouiseT]

C'est super mes boutons sont alignés ! J'ai du mal à comprendre comment faire mais j'ai réussi grâce à vos indications et le text-align. Merci beaucoup.


PS: pardon pour l'oubli de l'utilisation du bouton 'code'

[Muchos]

J'ai du mal à comprendre comment faire

text-align permet d'aligner les éléments inline positionnés dans le flux. Vos inline-block (en position static par défaut) sont cette catégorie d'éléments