Problème de positionnement

Fermé
Signaler
Messages postés
1
Date d'inscription
lundi 26 septembre 2016
Statut
Membre
Dernière intervention
26 septembre 2016
-
Messages postés
2622
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
27 novembre 2021
-
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 :


<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

Messages postés
2622
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
27 novembre 2021
476
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,