Problème de positionnement
Essrilenth
Messages postés
1
Statut
Membre
-
Pitet Messages postés 2845 Statut Membre -
Pitet Messages postés 2845 Statut Membre -
Bonjour,
J'essayer de faire une page de garde pour un site web, composée d'une image à gauche, une a droite, et d'un bouton au milieu.
Mon HTML est ainsi :
Et mon CSS :
Seulement mon site ressemble à cela : http://hpics.li/ce7a12d
Le bouton "Commencer" n'est pas centré.
Merci d'avance ! :)
J'essayer de faire une page de garde pour un site web, composée d'une image à gauche, une a droite, et d'un bouton au milieu.
Mon HTML est ainsi :
<body>
<p>
<img id="homme" src="Images/Homme.png">
<div id="button">
<img src="Images/Commencer%20boutton.png">
</div>
<img id="femme" src="Images/Femme.png">
</p>
</body>
Et mon CSS :
body {
background-color: whitesmoke;
}
#homme {
float: left;
position: relative;
top: 6px;
}
#button {
display: inline-block;
margin-left: auto;
margin-right: auto;
}
#femme {
float: right;
position: relative;
top: 1px;
}
Seulement mon site ressemble à cela : http://hpics.li/ce7a12d
Le bouton "Commencer" n'est pas centré.
Merci d'avance ! :)
1 réponse
-
Salut,
Si tu position ton bouton en inline-block, le plus simple pour le centrer est d'appliquer un text-align: center sur son parent :<div class="text-center"> <img id="homme" src="Images/Homme.png"> <div id="button"> <img src="Images/Commencer%20boutton.png"> </div> <img id="femme" src="Images/Femme.png"> </div>body { background-color: whitesmoke; } .text-center { text-align: center; } #homme { float: left; position: relative; top: 6px; } #button { display: inline-block; } #femme { float: right; position: relative; top: 1px; }
Bonne journée,
